Выравнивание изображения по центру по горизонтали в слое
У меня есть следующий код
<html>
<head>
<title>Test</title>
<style type = "text/css">
<!--
body,td,th {
color: #FFFFFF;
}
body {
background-color: #000000;
}
#Pictures {
position:absolute;
width:591px;
height:214px;
z-index:1;
left: 17%;
top: 30%;
text-align:center;
}
#Links {
width:600px;
height:30px;
z-index:2;
top: 184px;
font-family: "Broadway", Broadway, monospace;
font-size: 14px;
color: #FFFFFF;
text-align: center;
}
.links2 {
font-family: Broadway;
color: #FFFFFF;
text-decoration: none;
}
a:links2, a:visited {
color: #ffffff;
}
a:hover, a:active {
color: #333333;
}
#Main {
position:absolute;
width:800px;
height:600px;
z-index:2;
left: 15%;
top: 10%;
right: 15%;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#Logo {
position:absolute;
float: left;
width:104px;
height:100px;
z-index:2;
}
</style>
</head>
<body>
<div id = "Main">
<div id = "Pictures">
<div>
<a href = "1.html" ><img src = "1.gif" alt = "x" width = "181" height = "173" border = "0" /></a>
<a href = "1.html" class = "links2">1</a>
</div>
<div>
<a href = "2.html" class = "links2"><img src = "2.gif" alt = "x" width = "181" height = "173" border = "0" align = "top" /></a>
<a href = "2.html" class = "links2">2</a>
</div>
<div>
<a href = "3.html" class = "links2"><img src = "3.gif" alt = "3" width = "181" height = "173" border = "0" /></a>
<a href = "3.html" class = "links2">3</a>
</div>
</div>
</div>
<div id = "Logo"><img src = "logo.gif" alt = "x" width = "104" height = "100" border = "0"/></div>
</div>
</body>
</html>
Которая отображает слои изображения по вертикали.
Я пытаюсь сделать так, чтобы 3 изображения были выровнены по горизонтали с текстом по центру под ними. Почему по умолчанию они вертикальные, и могу ли я изменить это поведение?
Ответы 3
Я думаю, что display: block; в вашем классе links2 должен правильно размещать ссылки под изображениями.
Кроме того, чтобы выровнять изображения по горизонтали, используйте <span> вместо <div> внутри div 'Pictures' и переместите их влево.
#Pictures span
{
float: left;
margin-right: 5px;
}
Извиняюсь! Соответственно отредактировал свой ответ.
Вроде работает! Я заменил все DIV на: <SPAN style = "float: left;> Есть ли лучший способ сделать это? И как вы поместили интервал между ними?
Я добавил CSS, который вам понадобится в ответе :)
Это работа, но на мой взгляд не лучший способ получить то, что вам нужно. Слишком много разметки, и нет причин использовать span вместо div, если вам нужно присвоить span свойство float: left.
Согласен - мне не стыдно признать, что мой ответ - в лучшем случае быстрое решение.
На самом деле вам не нужно столько кода, чтобы добиться того, что вам нужно. Например:
<style>
body {
background-color: #000;
color: #FFF;
}
a {
font-family: "Broadway", Broadway, monospace;
font-size: 14px;
color: #FFF;
}
#images a {
width: 24.99%;
display: block;
float: left;
text-align: center;
}
</style>
<div id = "images">
<a href = "1.html" >
<img src = "1.gif" alt = "x" width = "181" height = "173" border = "0" /><br />
One
</a>
<a href = "2.html" >
<img src = "2.gif" alt = "x" width = "181" height = "173" border = "0" /><br />
Two
</a>
<a href = "3.html" >
<img src = "3.gif" alt = "x" width = "181" height = "173" border = "0" /><br />
Three
</a>
<a href = "4.html" >
<img src = "4.gif" alt = "x" width = "181" height = "173" border = "0" /><br />
Four
</a>
</div>
Уловка для выравнивания элементов по горизонтали, а не по вертикали заключается в том, чтобы «плавать» контейнеры (влево или вправо). Установив ссылки для отображения: блок; вы можете использовать их как контейнеры вместо того, чтобы оборачивать все лишними <div>. Я установил ширину 25% (или 24,99%, чтобы избежать ошибки округления в некоторых браузерах), чтобы они равномерно распределялись по странице, но вам может потребоваться другое выравнивание, которое легко сделать с помощью полей / отступов и / или разная ширина на контейнерах. Также обратите внимание, что когда вы устанавливаете цвет текста в теле {}, вам не нужно указывать его снова где-либо, кроме ссылок. То же самое и с семейством шрифтов, хотя оно также наследуется ссылками. Удачи с проектом!
Посмотрите на этот код и проверьте его: вы можете сделать то же самое более эффективным, семантическим и понятным способом:
CSS:
div.imageBox {
float: left;
margin-right: 10px;
}
div.imageBox p {
text-align: center;
}
HTML:
<div class = "imageBox">
<a href = "#">
<img src = "image1.gif" width = "100" height = "100"
alt = "image 1" /></a>
<p><a href = "#">1</a></p>
</div>
<div class = "imageBox">
<a href = "#">
<img src = "image2.gif" width = "100" height = "100"
alt = "image 1" /></a>
<p><a href = "#">2</a></p>
</div>
<div class = "imageBox">
<a href = "#">
<img src = "image3.gif" width = "100" height = "100"
alt = "image 1" /></a>
<p><a href = "#">3</a></p>
</div>
Это все, что вам нужно!
Если вы хотите сохранить свой код, нет причин использовать атрибут align внутри тега img. Вы можете использовать span вместо div, но в этом случае лучше продолжать использовать div и указать им ширину:
div#Pictures div
{
float: left;
margin-right: 5px;
}
Этот код:
a:links2
не имеет смысла. links2 - это созданный вами класс, а не псевдокласс или псевдоэлемент.
Он действительно помещает текст по центру под изображениями, но не мешает изображениям складываться по вертикали.