CODEWITHSUNDEEP
htmlcss
webdad3
webdad3

Reputation: 9080

CSS Centering with nested Divs

Can anyone take a look at this and let me know what I'm doing wrong (probably something stupid)?

I would like the Text "test" to be centered.

http://fiddle.jshell.net/uteaH/3/

CSS:

.wrap {
    max-width: 1139px;
    margin-left: auto;
    margin-right: auto;     }

#screenPresentation {
    border-top: 4px solid #d95936;
    margin-top: 50px;
    margin-bottom:10px;
    background: #fff;
}

#screenPresentation h2 {
    margin-top: -45px;
    color: #000;
    font-size: 2.4em;
    font-weight: 500;
    float:left;
}
 .loginContainer-wrapper {
    width: 99%;
    height: 500px;
    border: 2px solid #000;
    margin:0 auto;
}

HTML: 

<div class="wrap" id="screenPresentation">
    <h2>Title</h2>
    <div class="loginContainer-wrapper">
        test
    </div>
</div>

Upvotes: 0

Views: 89

Answers (4)

kei
kei

Reputation: 20471

I'm going to be a mindreader here since you won't tell us exactly what needs to be centered

DEMO

For #screenPresentation h2

Remove
float:left;

Replace with
position: absolute;
width: 95%;
text-align: center;

Sorry - I updated my question. I need the text "test" centered inside the inner div.

Oh in that case

Remove width:95%;text-align:center from #screenPresentation h2
Add text-align:center to .loginContainer-wrapper

DEMO

Upvotes: 1

Wrostran
Wrostran

Reputation: 90

you can use 

<center>
test
</center>

that will do it.

Upvotes: -1

DaniP
DaniP

Reputation: 38252

To center the text you need two steps:

  • First reset margin and padding for your tags:

    * {
  margin:0;
  padding:0;
}

  • Second add text-align:

    .wrap {
  text-align:center;
}

The demo http://fiddle.jshell.net/uteaH/9/

Upvotes: 1

roofdog
roofdog

Reputation: 361

text-align:center; by any chance?

Upvotes: 3

Related Questions