центрирование div внутри div

Я начинающий дизайнер веб-дизайна. Этот вопрос, возможно, был задан, но я также ответил на эти ответы, но они не помогли. Моя проблема в том, что у меня есть div под названием «header» и 3 divs внутри этого div. Они не совпадают с центром в родительском div. Я пробовал много ответов, но они не работают.центрирование div внутри div

Вот мой код:

#header { 
    height: 176px; 
    text-align: center; 
    position: absolute; 
     } 
    #header div { 
    display: inline; 
    text-align: center; 
    margin: auto; 
    float: left; 
    position: relative; 

} 

#logo { 
    height: 156px; 
    width: 218px; 
    background-image: url(../images/logo_03.jpg); 


} 

#tagline { 
    width: 250px; 


} 
#badge { 
    width: 300px; 


}

здесь HTML код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Ebhar media</title> 
<style type="text/css"> 
</style> 
<link href="style/homestyle.css" rel="stylesheet" type="text/css" /> 
<style type="text/css"> 
body { 

    min-width:1407px; 
} 
</style> 
</head> 

<body leftmargin="0px" topmargin="0px" marginwidth="0px" marginheight="0px"> 
<div id="base"> 
    <div id="header" align="center"> 
    <div id="logo"></div> 
    <div id="tagline">YOUR SUCESS IS OUR SUCESS</div> 
    <div id="badge">Content for id "badge" Goes Here</div> 
    </div> 
    <div id="navbar">Content for id "navbar" Goes Here</div> 
</div> 
</body> 
</html>

источник

2013-06-05 sam

Вы также должны указать нам свой HTML-код для заголовка, а также то, что вы действительно хотели бы видеть. – KaraokeStu

Одна из возможных проблем заключается в том, что ваш '# header' потерял свою полную ширину из-за' position: absolute; '- что произойдет, если вы дадите ему' width: 100%? ' – xec

@KaraokeStu я добавил html-коды – sam

удалить с position:absolute из #header и удалить position:relative, float:left из #header div

#header { 
    height: 176px; 
    text-align: center; 
/* position: absolute;*/ 
} 
#header div { 
    display: inline; 
    text-align: center; 
    margin: auto; 
/* float: left; 
    position: relative;*/ 
}

Я думаю й будет решать вашу проблему.

Демо: http://jsfiddle.net/UYWqt/

источник

2013-06-05 09:01:53

Да, это выглядит разумно. Я считаю, что 'text-align: center;' и 'margin: auto;' на '#header div' тоже избыточны. – xec

но это не решило проблему – sam

проверить jsFiddle ссылку http://jsfiddle.net/UYWqt/ –

Следующая должно работать для вас:

#header { 
    height: 176px; 
    width: 100%; 
} 

#header div { margin: auto; } 

#logo { 
    height: 156px; 
    width: 218px; 
    background-image: url(../images/logo_03.jpg); 
} 

#tagline { 
    width: 250px; 
} 
#badge { 
    width: 300px; 
}

источник

2013-06-05 09:17:17 KaraokeStu

Вы можете просто добавить атрибут вашего DIV попробовать что-то вроде этого

<div align="center"> 
    <div></div> 
</div>

источник

2013-06-05 10:18:21 edd

Это то, что вы точно нужно?

http://jsfiddle.net/nJqfn/

Некоторые замечания на будущее - не использовать

<body leftmargin="0px" topmargin="0px" marginwidth="0px" marginheight="0px">.

Это лучше включить normalize.css или reset.css для просмотра кросс-браузера.
Это

<div id="header" align="center">

не слишком хорошо. Попробуйте разделить вид и код.

источник

2013-06-05 11:38:30 LadyBo

центрирование div внутри div

ответ

Смежные вопросы