Centering contents in a

Question

I am trying to center text and images on a "content" div. I tried (margin: 0 auto;) and couple more and still not getting it. Also trying to center the div on the screen.

CSS:

#content {
    width: 100%;
}

#content img {
    width: 50%;
    opacity: 0.75;
}

#content img:hover {
    opacity: 1;
}

HTML:

<div id="content">
    <img src="images/intro_7.jpg">
</div>

possible duplicate of [How to horizontally center a div in a div?](http://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-a-div) — Theolodis, Jul 16 '14 at 05:10

imbondbaby · Accepted Answer · 2014-07-16T05:15:58.330

3

In #content, add text-align:center;:

#content {
    width: 100%;
    text-align:center;
}

UPDATE

Use table and table-cell to center is horizontally and vertically.

Surround your HTML with three div as follows:

<div class="outter">
<div class="center">
<div class="inner">

CSS:

.outter {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}
.center {
    display: table-cell;
    vertical-align: middle;
}

.inner {
    margin-left: auto;
    margin-right: auto;
}

JSFiddle Demo

More info here for vertical alignment.

Note: IE7 and below do not support display:table; or display: table-cell;

edited Jul 16 '14 at 05:15

answered Jul 16 '14 at 05:04

imbondbaby

6,351
3
21
54

1

Awesome, thank you. That did center the content, but how could I center the div on the screen now? – That's Me Again Jul 16 '14 at 05:09
Horizontally and vertically? – imbondbaby Jul 16 '14 at 05:11
Is there a more accurate way than margin-top: 50%; ? – That's Me Again Jul 16 '14 at 05:11
Yeah! In the center of the screen/page. – That's Me Again Jul 16 '14 at 05:12
1

Don't care about IE7. Big thanks. Spent an hour trying to figure it out. – That's Me Again Jul 16 '14 at 05:20

Centering contents in a

1 Answers1