问题描述:

I know that this has been explained in several other questions, but I can't manage to center the text in the middle of my div...

HTML code, where the text "Weekabonnement" must be aligned in the middle (both horizontally and vertically) of div "header" :

<div class="section2">

<div class="content2">

<p><span style="font-size:30px; color:#fdd400; margin-left:40%">Onze Producten</span></p>

<ul id="nav2">

<li class="active">Particulier</li>

<li>Zakelijk</li>

<li>Alle producten ></li>

<div class="clearfix"></div>

<ul>

</div>

<div class="product1">

<div class="header">

<p><span style="font-size:20px; color:white">Weekabonnement</span></p>

</div>

<div class="money">

</div>

</div>

</div>

The CSS code:

.section2

{

position:relative;

width:100%;

height:700px;

border: 2px solid;

}

#nav2

{

list-style: none outside none;

font-size:16px;

position:absolute;

margin-left:26%;

margin-top:-17px;

color:#6e6e6e;

}

#nav2 li

{

border-bottom: 2px solid #DDDDDD;

cursor: pointer;

float: left;

margin: 0;

width:160px;

height:50px;

line-height:50px;

position: relative;

text-align:center;

}

.clearfix

{

clear: both;

}

#nav2 li:hover:after, #nav2 li.active:after

{

border: 1px solid #044584;

bottom: 0;

content: "";

left: 0;

position: absolute;

width: 160px;

}

.active

{

color:#044584;

font-weight: bold;

}

.product1

{

margin-left: 4%;

margin-top: 5%;

float: left;

width: 24%;

height:73%;

border: 1px solid;

background-color: #f6f6f6;

}

.header

{

background-color:#044584;

height:10%;

margin-left: 2%;

margin-right: 2%;

margin-top: -3%;

text-align: center;

}

.money

{

position: relative;

border: 1px solid #ededed;

height:20%;

margin-left: 2%;

margin-right: 2%;

}

I really need a help because I've spent more than 1 hour on this thing...

网友答案:
just modify .header class :
.header
{
    background-color:#044584;
    height:10%;
    margin-left: 2%;
    margin-right: 2%;

    text-align: center;
    float: left;
    width:96%;
     margin-top: 3%;
}

jsfiddle

网友答案:

You can change the text to a div, give it a fixed height, and equal the line-height to that.

<div style="height: 50px; line-height: 50px;">Weekabonnement</div>
相关阅读:
Top