Solved

Once again, centering objects in a div

Posted on 2014-02-16
22
182 Views
Last Modified: 2014-04-12
Hello,

I have two items that I am trying to center in divs, but haven't had much luck.

I think the problem may be that I don't want to declare the overall width in pixels -- since this is a responsive design and I want it to look good in a cell phone.  But maybe I have no choice but to declare an overall width.

This is what I have so far -- for the video -- and is clearly "wrong":
div#media-item-container {
    width: 100%;
  margin-left: auto ;
  margin-right: auto ;
}

div.media-item-container {
    width: 100%;
  margin-left: auto ;
  margin-right: auto ;
}

Open in new window


I haven't tried any code so far for the amazon thing.

Anyway here's the URL of the development site:

http://www.rowbytesting.com

The two areas that I want to center are the both in the right side of the page.

1)  the video
2)  The amazon widget.

Looking forward to you suggestions -- and solution!

Thanks

Rowby
0
Comment
Question by:Rowby Goren
  • 10
  • 7
  • 3
22 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39863872
For the video, add text-align-center to the div just above the iframe

<div class="media-item-full" id="media-item" style="width:100%;text-align: center;">
                    <iframe src="http://player.vimeo.com/video/77947145?title=0&amp;autoplay=false&amp;byline=0&amp;portrait=0" width="250" height="187.5" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="
    /* text-align: center; */
"></iframe>	
</div>

Open in new window


I am not sure I see the amazon widget
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39863877
I see it.  At the bottom of your custom.css add this style

.amazon{text-align:center;}
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39863887
While you are at it... http://www.rowbytesting.com/awards-honors-a-nominations make the table here a little narrower and again to your custom css add

td, th {vertical-align:text-top;} and that will keep it neat when it wraps.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39863889
Thanks Scott for helping me with this.

The video is a module where I can't easily add anything to the html.

However firebug reveals it has this in its html structure:
div class uk-panel uk-panel-box  sidebarVideo

Can we use css to control above -- instead of embedding it in the html?

I put .amazon{text-align:center;}  at the end of the custom.css but it does not seem to affect the amazon widget.

Thanks!

Rowby
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39863892
td, th {vertical-align:text-top;} 

Open in new window


Added that. Yes, it works great!
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 250 total points
ID: 39863920
You can't easily target the iframe.   But you can center the iframe by adding to your custom.css

.media-item-full{text-align:center;}

and that will target the div that contains the iframe.

<div class="media-item-full" id="media-item" style="width:100%;">
                    <iframe src="http://player.vimeo.com/video/77947145?title=0&amp;autoplay=false&amp;byline=0&amp;portrait=0" width="250" height="187.5" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>      
                    </div>



For the amazon, it has changed since I last posted.  Remove the .amazon class in your css and instead edit the widget directly.   Add width:98% and margin-left:1%.  That will make the widget take up most of the width with a little bit of white space.  Or you can try 96% and 2%.

<div id="amzn_wdgt_t_8001_0" class="amzn_wdgt" style="color: rgb(234, 228, 147); background-color: rgb(74, 102, 118); width: 98%; padding-top: 0px; padding-bottom: 0px; background-position: initial initial; background-repeat: initial initial;margin-left: 1%;">
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39863951
Hi

The video is nicely centered.  Thanks!

However the Amazon widget is delivered from amazon  

 The code that pulls in the amazon widget is
	<script charset="utf-8" src="http://ws-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&amp;MarketPlace=US&amp;ID=V20070822%2FUS%2Fgeorgschla-20%2F8001%2F4db30f9d-1c87-40a3-a239-dc548bf73da5" type="text/javascript"></script>
</p>
<noscript><a href="http://ws-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&amp;MarketPlace=US&amp;ID=V20070822%2FUS%2Fgeorgschla-20%2F8001%2F4db30f9d-1c87-40a3-a239-dc548bf73da5&amp;Operation=NoScript">Amazon.com Widgets</a>
</noscript>

Open in new window


Can the above be centered?  Or will amazon's served widget ignore any code I include....

Maybe right and left padding???
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39863971
You need to go to your amazon account and change the width there.  Otherwise you run into the cross domain stuff.  If you have access to the widget, that would be the easiest.
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 39864019
You could also try adding this to your stylesheet

.amzn_wdgt {
   margin: 0 auto;
}

Open in new window

0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39864941
I added a div and then was able to control margins with this css:

div#amazzonn {
    margin: 0 auto 5px 25px;
    padding-left: 5px;
    padding-right: 5px;
}

Open in new window


(I realize I probably overdid it with both margin and padding declarations)
Do you think there is any way to modify the above to center (without the margins/padding?

(I will probably go into Amazon later and finally make the module wider so it fills the area better -- but I still would like to have it centered, but may setting for just a little bit of padding/margins on the right and left and a little on the bottom...)
0
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
LVL 51

Expert Comment

by:Julian Hansen
ID: 39865197
Did you try the suggestion in my last post. Works in Firebug when you add the style ...
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39865228
I thought i tried it but will try it again.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39865252
I would still make the thing wider.  I liked the look when it filled most of the space but not all.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39865258
Hi JulianH

I tried it but couldn't get it to work.  The actual css is located at amazon.com, not locally,  could that be the reason?

Could you check again?

Thanks

Rowby
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39865259
I would still make the thing wider.  I liked the look when it filled most of the space but not all.

I agree.  I will finally make it wider.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39865680
Finally (or should I open a new question)

Why isn't this slideshow centered?

http://www.rowbytesting.com/laugh-in/laugh-in-pov
I have this css:

div#centeringwidgekits {
    width: 100% ;
  margin-left: auto ;
  margin-right: auto ;
  
}

Open in new window


????
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39865983
Rowby, my bad for adding off topic info like the table.  You should really put that to another question.  Actually, instead of just this one item, think about using the bug finder (top right link) and place your site there.  

There are a number of issues that will come to light beyond just slider.  Just be prepared to do with those.   If you want to just stick to the slider, then a new question is fine.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39865991
Hi

I'll check out the bug finder -- sounds like a good idea.

In the meantime look for my question that I will post shortly.

Rowby
0
 
LVL 51

Assisted Solution

by:Julian Hansen
Julian Hansen earned 250 total points
ID: 39866640
I tried it but couldn't get it to work.  The actual css is located at amazon.com, not locally,  could that be the reason?

Where did you try?

If you add it to your style sheet and make it important it should do the trick.

.amzn_wdgt {
   margin: 0 auto !important;
}

Open in new window

0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39867456
Hi JulianH

I added your code.  I think it is working.  :)  Please confirm.

Thanks

Rowby
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now