Выровнять список перепутанных центров

Я хочу создать контактный раздел на веб-сайте, который я делаю, но проблема заключается в том, что на моем сайте есть text-align:center, и я использую список определений для контактной информации. есть ли способ, по которому я могу использовать обертку для моей страницы, но выравнивать текст влево, не выходя из белой границы?Выровнять список перепутанных центров

CSS:

@charset "utf-8"; 

html { 
    text-align: center 
} 

#container { 
    margin-left:auto; 
    margin-right:auto; 
    margin-top:50 auto; 
    margin-bottom:50 auto; 
    width:1000px; 
    background-color:#666666; 
} 

#body1 { 
    background-color:#666666; 
    width:1000px; 
    height:405px;; 
    border:3px solid #FFFFFF; 
    margin-top:50px auto; 
} 

#body2 { 
    background-color:#666666; 
    width:1000px; 
    height:800px;; 
    border:3px solid #FFFFFF; 
    margin-top:50px auto; 
} 

#body3{ 
    background-color:#666666; 
    width:1000px; 
    height:500px;; 
    border:3px solid #FFFFFF; 
    margin-top:50px auto; 
} 

#body4{ 
    background-color:#666666; 
    width:1000px; 
    height:500px;; 
    border:3px solid #FFFFFF; 
    margin-top:50px auto; 
} 

#body5{ 
    background-color:#666666; 
    width:1000px; 
    height:500px;; 
    border:3px solid #FFFFFF; 
    margin-top:50px auto; 
} 

.navbar { 
    margin:0px; 
    background-color:#999; 
    text-align:center; 
    list-style:none; 
    border-bottom:none; 
    padding-left:0px;  
} 


ul.navbar li { 
    width:20%; 
    display:inline-block; 
} 

ul.navbar a { 
    color:white; 
    font-size:20px; 
    display:block; 
    width:100%; 
    margin:0px; 
    padding:10px 0px; 
    text-decoration:none; 
} 

ul.navbar a:hover { 
    color:#000000; 
    background-color:#CCC; 
} 

body { 
    background-color:#333333; 
} 

#portrait { 
    position:relative; 
    top:20px; 
    right:420px; 


} 

#headerhome { 
    position:relative; 
    bottom:130px; 
    left:50px; 
    font-size:30px; 
    text-decoration:underline; 
    font-family:arial; 
    color:#CCCCCC 
} 

#goal { 
    margin-left:40px; 
    text-align:left; 
    text-indent:40px; 
    position:relative; 
    bottom:110px 
} 

.tab { 
    margin-left:40px; 
} 

#contact { 
    position:relative; 
    right:390px; 
    text-align:left 
}

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> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Joe Scotto | Contact</title> 
</head> 

<body> 
<div id="container"> 
<div id="body3"> 
<img src="banner.png" width="1000" height="100" /> 
<!--Navbar Start--> 
<center> 
    <ul class="navbar"> 
     <li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li><li><a href="contact.html">Contact</a></li><li><a href="services.html">Services</a></li><li><a href="biography.html">Biography</a></li> 
    </ul> 
</center> 
<!--Navbar End--> 
<div id="contact"> 
<dl> 
    <dt><h3>Phone Number</h3></dt> 
     <dd>XXX-XXX-XXXX</dd> 
    <dt><h3>Email Address</h3></dt> 
     <dd>[email protected]</dd> 
</dl> 
</div> 
</div>  
</div> 
</body> 
</html>

источник

2013-07-14 Anonymous

Пожалуйста, может поставить года скрипку –

'#contact { положения :относительный; Право: 390px; text-align: left } 'Вы написали отлично .. Потому что CSS идет сверху вниз и переписывает свойства с новыми значениями. – Bhavik

Вы пробовали это?

dl { 
    text-align: left; 
}

Редактировать: Я добавил выше к вашему css, и список был выровнен слева. «Важно!»:

источник

2013-07-14 20:08:29

Lars, это комментарий или ответ? Если ответ, пожалуйста, объясните, почему это должно сработать. Благодаря! – Sergio

Если я вас правильно понял, то ваша проблема может быть исправлена с помощью двух вещей

в #contact CSS оных после «выравнивания текста: слева;» в той же строке
Добавить марку, если она перекрывается.

Если это не ответит на ваш вопрос, пришлите мне ссылку, чтобы я мог видеть, что происходит.

надеюсь, что я помог.

источник

2013-07-14 20:09:45

#contact { text-align:left; } Возможна работа. position:relative; Попробуйте удалить. Поскольку CSS идет сверху вниз и переписывает свойства с новыми значениями. Check this

источник

2013-07-14 20:17:26 Bhavik

Если вы хотите сохранить «контактный блок» в body3 (который центрирован), почему вы добавили код - «right : 390px; " к #contact, я не вижу причины. Поэтому, если вы удалите его, все будет хорошо.

источник

2013-07-14 20:24:37

удалить выравнивания текста: центр с CSS в HTML тег и добавить атрибут выравнивания текста в каждом сНу теге, так что вы получите выравнивать, как вы хотите

источник

2013-07-15 02:53:31

Выровнять список перепутанных центров

ответ

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