Содержит изображение с Div

У меня есть простой 3-х столбцовый макет. В левом столбце есть изображение, которое должно быть сосредоточено внутри div, но, похоже, не подчиняется коду из div в таблице стилей. Таким образом, colimg1.png не центрируется и, кажется, вообще не находится в столбце col1.Содержит изображение с Div

Heres страница HTML:

<!DOCTYPE html> 
<html lang="en-US"> 
<head> 
<meta charset="utf-8"> 
<link rel="stylesheet" type="text/css" href="CSS/style.css"> 
</head> 

<body> 
<div id="header"> 
</div> 
<br> 
<br> 

<div id="col1"> 
    <img src="Images/colimg1.png"> 
</div> 

<div id="col2"> 
</div> 

<div id="col3"> 
</div> 

</body> 
</html>

это таблица стилей (я знаю, что есть некоторые неиспользуемые код там, но я пытался разные вещи)

body { 
font-family: sans-serif; 
margin: 0px; 
} 

#header { 
text-align: center; 
background-color: #cccccc; 
height: 75px; 
} 


#content { 
text-align: center; 
max-height: 800px; 
min-width: 400px; 
} 

#col1{ 
    float: left; 
    height: 500px; 
    text-align: center; 
    width: 33%; 
    border-width: 1px; 
    border-style: dotted; 
} 

#col2 { 
    float:left; 
    height: 500px; 
    text-align: center; 
    width: 33%; 
    border-width: 1px; 
    border-style: dotted; 
} 

#col3 { 
    float: left; 
    height: 500px; 
    text-align: center; 
    width: 33%; 
    border-width: 1px; 
    border-style: dotted; 
} 

#navtable{ 
border-width: 1px; 
} 

#navbar { 
    min-width: 600px; 
} 

ul { 
    text-align: center; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 

li { 
display: inline; 
} 

a:link { 
color: black; 
text-decoration: none; 
} 
a:visited { 
text-decoration: none; 
color: black; 
} 
a:hover{ 
text-decoration: none; 
color: black; 
} 
a:active{ 
text-decoration: none; 
color: grey; 
}

источник

2015-08-06 Fingers

ли 'img' элементы создаются на' дисплей: block' где-то в вашем CSS? Используя ваш точный код выше, кажется, что центры изображений просто отлично. http://jsfiddle.net/51fxmvr4/ – disinfor

Является ли изображение больше, чем столбец? – Ray

изображение я верю 235 на 185, но столбцы измеряются в% (точнее, 33), поэтому большую часть времени изображение меньше, чем столбец. – Fingers

Вы можете попробовать, как это -

#col1{ 
    float: left; 
    height: 500px; 
    text-align: center; 
    width: 33%; 
    border-width: 1px; 
    border-style: dotted; 
    position: relative;/*add this*/ 
} 
#col1 img{ 
    position: absolute; 
    left:0; 
    right:0; 
    top:0; 
    bottom: 0; 
    margin: auto; 
}

другой метод

body { 
 
\t font-family: sans-serif; 
 
\t margin: 0px; 
 
} 
 

 
#header { 
 
\t text-align: center; 
 
\t background-color: #cccccc; 
 
\t height: 75px; 
 
} 
 

 

 
#content { 
 
\t text-align: center; 
 
\t max-height: 800px; 
 
\t min-width: 400px; 
 
} 
 

 

 
.wrap{ 
 
    display:table; 
 
    width: 100%; 
 
} 
 

 
#col1 , #col2 ,#col3{ 
 
\t display: table-cell; 
 
\t vertical-align: middle; 
 
\t float: none !important; 
 
\t width: 33%; 
 

 
} 
 
#col1{ 
 
    float: left; 
 
    height: 500px; 
 
    text-align: center; 
 
    width: 33%; 
 
    border-width: 1px; 
 
    border-style: dotted; 
 
    
 
} 
 

 
#col2 { 
 
    float:left; 
 
    height: 500px; 
 
    text-align: center; 
 
    width: 33%; 
 
    border-width: 1px; 
 
    border-style: dotted; 
 
} 
 

 
#col3 { 
 
    float: left; 
 
    height: 500px; 
 
    text-align: center; 
 
    width: 33%; 
 
    border-width: 1px; 
 
    border-style: dotted; 
 
} 
 

 
#navtable{ 
 
border-width: 1px; 
 
} 
 

 

 
#navbar { 
 
    min-width: 600px; 
 
} 
 

 
ul { 
 
    text-align: center; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
li { 
 
\t display: inline; 
 
} 
 

 
a:link { 
 
\t color: black; 
 
\t text-decoration: none; 
 
} 
 
a:visited { 
 
\t text-decoration: none; 
 
\t color: black; 
 
} 
 
a:hover{ 
 
\t text-decoration: none; 
 
\t color: black; 
 
} 
 
a:active{ 
 
\t text-decoration: none; 
 
\t color: grey; 
 
}

\t <div id="header"> 
 

 
\t </div> 
 

 
\t <br> 
 
\t <br> 
 
\t <div class="wrap"> 
 
\t \t <div id="col1"> 
 
\t \t  <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQXsTRB1fecXvG0xnqJVCtAicCqxNvPgfHGr5X4G_AZIDMA7ViD"> 
 
\t \t </div> 
 

 
\t \t <div id="col2"> 
 
\t \t </div> 
 

 
\t \t <div id="col3"> 
 
\t \t </div> 
 
\t </div>

источник

2015-08-06 05:10:43

ваш первый ответ заставил его выглядеть хуже, ваш второй метод работал хорошо. но почему мой оригинальный код не работал? – Fingers

Содержит изображение с Div

ответ

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