CODEWITHSUNDEEP
htmlcss
so1120
so1120

Reputation: 275

Containing an Image with Div

I have a simple 3 column layout. In the left column, there is an image that it supposed to be centered within the div, but doesn't seem to be obeying the code from the div in the style sheet. So, colimg1.png doesn't center and doesn't seem to be situated at all in column col1.

Heres the page 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>

this is the style sheet (i know there's some unused code in there but I was trying different things)

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;
}

Upvotes: 1

Views: 48

Answers (1)

Mukul Kant
Mukul Kant

Reputation: 7122

You can try like this -

#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;
}

an another method 

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>

Upvotes: 2

Related Questions