CODEWITHSUNDEEP
htmlcss
renathy
renathy

Reputation: 5355

centering image int floating div

I cannot center image in div that is floating left. I have tried text-align and set margins.

CSS:

.to_left_690 {
    width: 690px;
    float: left;    
}
.to_left_290 {
    width: 290px;
    float: left;
    overflow: hidden;
    text-align: center;
}
p {
    margin: 0 0 14px 0px;
    text-align: justify;
}
img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

HTML:

<div class="to_left_690">

<h3>Date Center</h3>

    <p>One of the biggest` data centers in Latin America with over 3000 servers took a proactive approach to monitor their electrical infrastructure. Over 4 years later they have still not had any major disruptions.</p>

<h3>Call Center</h3>

    <p>
        <img class="alignleft size-full wp-image-181" alt="baloons" src="http://www.sheerdigitaltest.net/janus/wp-content/uploads/2013/07/baloons.png" width="62" height="70">During Carnival 2013 the data center air conditioning failed for a call centre company and no-one on site. Thanks to early detection and alerts sent to the standby maintenance team they were quickly able to resolve the situation and prevent a catastrophic shutdown.</p>

<h3>Facilities Management:</h3>

    <p><span>With over 1200 people working at headquarters the TJES needed a solution to maintain proper working conditions to be able to perform with the minimum of disruption. Janus Technology solutions have eliminated all problems and saved millions in lost productivity over 2 years</span>
    </p>
</div>
<div class="to_left_290">
    <img class="size-full wp-image-183 aligncenter" alt="ipad" src="http://www.sheerdigitaltest.net/janus/wp-content/uploads/2013/07/ipad.png" width="290" height="368">fdsfdsfdsfds</div>

JSFIddle: http://jsfiddle.net/xLwSh/

Upvotes: 1

Views: 238

Answers (4)

Sterling Camden
Sterling Camden

Reputation: 563

add this to a class on the floated div:

text-align: center;
width: 100%;

it's not centering in the div now because floated divs size to the width of their content you set a fixed width on the div so the img is centered within the 290px you gave it, so the div isn't taking up the whole screen width

Upvotes: 2

Madeyedexter
Madeyedexter

Reputation: 1193

Set image inside another div and use display:inline in image style.

Upvotes: 0

Learner
Learner

Reputation: 4004

If you question is about centering the image in relation to page. The reason is you have the wrapper div .to_left_290 with width: 290px;. Because the image is wrapped within a container that has fixed with and float:left you can not expect it to align in the center of the page. You need 100% width for the wrapper class.

Not sure if you need the fixed width and float align for image wrapper, but if you do then you can not have the image aligned center of the page. If you can change that part here's something you can do.

Change the width of image wrapper .to_left_290 to 100%. However, adding 100% width to the floated div eliminates the need of having a floated div. If you still want your div to be floated left and with fixed width, you can not have it centered.

Only thing you can do is to get rid of fixed width on a wrapper div. Like this:

.to_left_290 {
    width: 100%;
    float: left;
    overflow: hidden;
    text-align: center;
    display:block;
}

Working fiddle: http://jsfiddle.net/gjmvY/1/

Upvotes: 0

leoMestizo
leoMestizo

Reputation: 1499

This is what you want? Fiddle

Just add this CSS rule:

.to_left_290 {
    width: 100%; /* Instead of 290px */
    text-align: center;
}

BTW, you have to use tex-align property in the "container" element, not in the child (the follow CSS rules NOT center the inside img:

.to_left_290 > img {
   text-align: center;
}

Because you are telling that center the content inside the img element.

Upvotes: 0

Related Questions