?
Solved

Once again, centering objects in a div

Posted on 2014-02-16
22
Medium Priority
?
189 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 10
  • 7
  • 3
22 Comments
 
LVL 53

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 53

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 53

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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 1000 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&autoplay=false&byline=0&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 53

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 58

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
 
LVL 58

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 53

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 53

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 58

Assisted Solution

by:Julian Hansen
Julian Hansen earned 1000 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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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 …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses
Course of the Month9 days, 15 hours left to enroll

762 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