Question

我有一个简单的3列布局。在左栏中，有一个图像，它应该在div中居中，但似乎不遵守样式表中div的代码。因此，colimg1.png不居中，似乎根本不在col1列中。

继承页面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;
}

Answer 1

你可以这样试试 -

#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 {
	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;
}


.wrap{
  display:table;
  width: 100%;
}

#col1 , #col2 ,#col3{
	display: table-cell;
	vertical-align: middle;
	float: none !important;
	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 {
	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;
}

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

包含Div的图像

1 个答案: