Я не могу понять, как центрировать мой контент div

Используя мой код, размещенный ниже.Я не могу понять, как центрировать мой контент div

Я хочу центрировать div и текст внутри центра веб-страницы. Мой конечный результат по-прежнему показывает div и контент в левом верхнем углу.

Я попытался установить поля на 0 авто.

a { 
 
    float: left; 
 
    width: 8em; 
 
    text-decoration: none; 
 
    color: white; 
 
    background-color: #0094ff; 
 
    padding: 0.2em 0.4em; 
 
    border-right: 1px solid white; 
 
    margin-left:0 auto; 
 
    margin-right:0 auto; 
 
} 
 

 
a:hover { 
 
    background-color: #00ff90; 
 
} 
 

 
li { 
 
    display: inline; 
 
} 
 

 

 
div { 
 
    
 
    -webkit-touch-callout: none; 
 
    -webkit-user-select: none; 
 
    -khtml-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 

 
#horizontal-list ul { 
 
    list-style:none; 
 
    width:10%; 
 
    padding-right:20px; 
 
} 
 

 
#horizontal-list ul li { 
 
    list-style:none; 
 
    margin:0 auto; 
 
    display:inline-block; 
 
}

Html ниже:

<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <link rel="stylesheet" type="text/css" href="Sitestyles.css"> 
 
    <title>blahblah</title> 
 
</head> 
 
<body> 
 
    <div id="menu-outer"> 
 
     <div class="table"> 
 
      <ul id="horizontal-list"> 
 
       <li><a href="#"><img src="image.png" onmousedown="return false;" alt="Something" /></a></li> 
 
       <li><a href="#"><img src="image.png" onmousedown="return false;" alt="Something" /></a></li> 
 
       <li><a href="#"><img src="image.png" onmousedown="return false;" alt="Something" /></a></li> 
 
       <li><a href="#"><img src="image.png" onmousedown="return false;" alt="Something" /></a></li> 
 
       <li><a href="#"><img src="image.png" onmousedown="return false;" alt="Something" /></a></li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 

 
</body> 
 
</html>

источник

2015-04-25 Chris

Возможный дубликат [center content in div with CSS] (http://stackoverflow.com/questions/4374650/center-content-in-div-with-css) – Huey

ширина набора для div – ashkufaraz

где html-код ?, ваш код не работал. – pcs

Вам нужно будет добавить ширину к div вы хотите отцентрировать. В противном случае margin:auto; не будет знать, как вычислить поля.

Вот пример того, как это сделать - JSfiddle

А вот код, который делает это возможным:

.table{ 
    margin: auto; 
    width: 50% 
}

Здесь также полное руководство по centering in CSS.

Если у вас есть что-то еще, прокомментируйте ниже. Спасибо

источник

2015-04-25 04:24:29

Спасибо, я, кажется, запутался и думаю, что ширина установки для div изменит ширину элементов. – Chris

Нет проблем. Рад помочь –

Я не могу понять, как центрировать мой контент div

ответ

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