How to center img inside position absolute - html

I try to center image inside this absolute position div I try margin: 0 auto but it can't work. what I am doing wrong?
<div class="support"> <img src="../image/contact.jpg" /></div>
.support {
position:absolute;
left:30px;
top:50px;
width:300px;
height:450px;
}
.support img {
width:243px;
height:350px;
margin:0 auto;
}


add display:block to image:
.support img {
width:243px;
height:350px;
margin:0 auto;
display: block; /* add this */
}


You can also use display: block; like this:
.support {
left:30px;
top:50px;
width:300px;
height:450px;
}
.support img {
width:100px;
height:100px;
margin:0 auto;
display: block;
}
<div class="support"> <img src="data:image/jpeg;base64,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" /></div>


Hey try this text-align center in image parent div
.support {
position:absolute;
left:30px;
top:50px;
width:300px;
height:450px;
text-align: center;
}
.support img {
width:243px;
height:350px;
margin:0 auto;
}
<div class="support"> <img src="../image/contact.jpg" /></div>


<style>
.support {
left:30px;
top:50px;
width:300px;
height:450px;
margin:0 auto;
}
.support img {
width:243px;
height:350px;
margin:0 auto;
}
</style>
<div class="support"> <img src="../image/contact.jpg" /></div>
try this.

Related

Why `display:table-cell` make `margin:0 auto` take no effect?

*{
padding:0;
margin:0;
text-decoration:none;
}
#head{
width:400px;
height:40px;
border:1px solid red;
margin:0 auto;
line-height:40px;
font-size:20px;
text-align:center;
}
#main{
width:400px;
height:400px;
border:1px solid green;
margin:0 auto;
text-align:center;
vertical-align:middle;
}
<div id="head">set in middle and center</div>
<div id="main">
<img src="https://i.stack.imgur.com/9rdPN.png" alt="">
</div>
Both div head and div main was set as center by margin:0 auto,you can see.
I want to set the image in div main as middle vertically.
Just add display:table-cell in div main.
*{
padding:0;
margin:0;
text-decoration:none;
}
#head{
width:400px;
height:40px;
border:1px solid red;
margin:0 auto;
line-height:40px;
font-size:20px;
text-align:center;
}
#main{
width:400px;
height:400px;
border:1px solid green;
margin:0 auto;
text-align:center;
vertical-align:middle;
display:table-cell;
}
<div id="head">set in middle and center</div>
<div id="main">
<img src="https://i.stack.imgur.com/9rdPN.png" alt="">
</div>
Now the image was set as middle vertically,however div main was not setted as margin:0 auto,why display:table-cell make margin:0 auto take no effect?

You can use position: absolute; on the image with transform: translate(-50%, -50%); to center it
check this:
*{
padding:0;
margin:0;
text-decoration:none;
}
#head{
width:400px;
height:40px;
border:1px solid red;
margin:0 auto;
line-height:40px;
font-size:20px;
text-align:center;
}
#main{
position: relative;
width:400px;
height:400px;
border:1px solid green;
margin:0 auto;
text-align:center;
vertical-align:middle;
}
#main img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div id="head">set in middle and center</div>
<div id="main">
<img src="https://i.stack.imgur.com/9rdPN.png" alt="">
</div>

CSS Positioning an image

Can someone plz show me how to center this image in its div while keeping the image overlapping its div top.
jsfiddle.net/MalcollmS/0ees82hc
<body>
<div id="outerdiv">
<div id="innerdiv">
<img src="http://www.mylester.lester.com.au/Content/Images/LesterBanner.jpg" alt="lesterbanner" id="banner" />
<div id="body">
</div>
</div>
</div>
</body>
body{
height:100%;
background-color: #142758;
padding-top:50px;
}
#outerdiv {
margin:auto;
width:70%;
height:500px;
background-color:#778CAC;
}
#innerdiv {
width:95%;
margin:auto;
height:95%;
background-color:white;
position: relative;
top: 50%;
transform:translateY(-50%);
}
header {
width:100%;
}
#banner {
background-image:url('lesterbanner.jpg');
width:300px;
margin-left:auto;
margin-right:auto;
margin-top:-90px;
}
Malcolm

Just text-align:center; add to #innerdiv
jsFiddle example

img tags are display: inline-block by default which can be centered with text-align: center; on the parent element:
#innerdiv {
...
text-align: center;
}
JSFIDDLE

Try using % for margin or assign it to a div here
<body>
<div id="outerdiv">
<div id="innerdiv">
<!-- assign div --><div class="img_holder">
<img src="http://www.mylester.lester.com.au/Content/Images/LesterBanner.jpg" alt="lesterbanner" id="banner" />
</div>
<div id="body">
</div>
</div>
</div>
</body>
Css
body{
height:100%;
background-color: #142758;
padding-top:50px;
}
#outerdiv {
margin:auto;
width:70%;
height:500px;
background-color:#778CAC;
}
#innerdiv {
width:95%;
margin:auto;
height:95%;
background-color:white;
position: relative;
top: 50%;
transform:translateY(-50%);
}
header {
width:100%;
}
#banner {
background-image:url('lesterbanner.jpg');
width:100%;
}
.img_holder{
position: relative;
width:300px;
margin: 0 auto;
top: -30px;
}

#banner {
background-image:url('lesterbanner.jpg');
width:300px;
margin:-2% 0 0 42%;
}

I'm having troubles trying to vertical align a div with CSS

Hello I'm trying to align the "container2" div to bottom of "cointainer" but I'm having troubles and I dont know where, any help?
HTML
<div id="container">
<div id="container2">
<p>Text</p>
</div>
</div>
CSS
#container{
/*Colors*/
background-color:rgb(129, 159, 255);
/*Size Box*/
width:400px;
height:200px;
margin:0 auto;
overflow:auto; }
#container2{
/*Colors*/
background-color:black;
color:white;
/*Size Box*/
width:50%;
height:50%;
padding:20px;
margin:0 auto;
overflow:auto; }
http://jsfiddle.net/G4GT4/1/

With the current structure you would have to position the child with position:absolute.
JSfiddle Demo
CSS
#container{
/*Colors*/
background-color:rgb(129, 159, 255);
/*Size Box*/
width:400px;
height:200px;
margin:0 auto;
overflow:auto;
position: relative;
}
#container2{
/*Colors*/
background-color:black;
color:white;
/*Size Box*/
width:50%;
height:50%;
padding:20px;
margin:0 auto;
overflow:auto;
position: absolute;
bottom:0;
left:50%;
margin-left: -25%;
}

Add
#container { position: relative; }
#container2 { position: absolute; bottom: 0; }
Or simply use tables

Demo
#container {
background-color:rgb(129, 159, 255);
display: table-cell;
width:400px;
height:200px;
margin:0 auto;
overflow:auto;
text-align: center;
vertical-align: bottom;
}
#container2 {
background-color:black;
color:white;
/*Size Box*/
width:50%;
height:50%;
padding:20px;
margin:0 auto;
overflow:auto;
display: inline-block;
}

You have to set margin-top (you know both heights) or using positioning, I´ve chosen second variant.
#container {postition: relative}
#container2 {position: absolute; bottom: 0; left: 25%;}
http://jsfiddle.net/G4GT4/2/

You can set position relative to container2
Working fiddle here
#container2{
/*Colors*/
position: relative;
top: 15%;
background-color:black;
color:white;
/*Size Box*/
width:50%;
height:50%;
padding:20px;
margin:0 auto;
overflow:auto;
}

If you don't want to use position absolute; you can do this:
fiddle
css
#container{
text-align:center;
}
#container:before {
content:"";
height:100%;
display:inline-block;
vertical-align:bottom;
}
#container2{
display:inline-block;
vertical-align:bottom;
}

bring second div in center is failing

Having Following code, M trying to bring the second div in the center, somehow it is not coming, i do not want to use margin in minus:
Here is html and css
<div id="headerLeft">
<div id="imgsection">
<div class="logo"></div>
</div>
<div id="usersection">
<div class="user">Sign</div>
<div class="location">Find</div>
</div>
</div>
my CSS
#headerLeft {
width:45%;
}
#headerLeft #imgsection {
width:150px;
}
#headerLeft #imgsection .logo {
background: url('../img/logo.png') no-repeat;
background-size: cover;
width:88px;
height:71px;
width:100px;
}
#headerLeft #usersection {
float:right;
width:200px;
margin: auto;
}
#headerLeft #usersection .user {
width:80px;
float:left;
}
#headerLeft #usersection .location {
width:80px;
float:left;
}
check this fiddle
http://jsfiddle.net/CF6kX/
the second one which is covered with id: usersection needs to be in between, currently it is appearing at the bottom

In the image section add property float:left ,increase headerleft width below is the code
#headerLeft {
width: 58%;
}
#headerLeft #imgsection {
width:150px;
float: left;
}
#headerLeft #imgsection .logo {
background: url('../img/logo.png') no-repeat;
background-size: cover;
width:88px;
height:71px;
width:100px;
}
#headerLeft #usersection {
float:right;
width:200px;
margin: auto;
}
#headerLeft #usersection .user {
width:80px;
float:left;
}
#headerLeft #usersection .location {
width:80px;
float:left;
}

remove float:right from This CSS
#headerLeft #usersection
{
float:right;
width:200px;
margin: auto;
}
FIDDLE

Placing an image on top of CSS box content.

I am trying to place my logo above a menubar i created in css, but what ever i try the logo always goes below the menu bar, i am trying to achieve a manubar the width of the page with a logo in the centre of the menubar.
My CSS code is ;
#bar {
margin-top:50px;
width: 1920px center;
height: 30px;
background: #2E2E2E;
border: 3px groove #FFD700;
}
#logo {
background-image:url(../img/LOGO1.png);
background-size:150px;
width:150px;
height:150px;
margin:0 auto;
}
and html is;
</head>
<body>
<div id="bar">
</div>
<div id="logo">
</div>
</body>
</html>
Thankyou for any help

Z:index is your friend
http://jsfiddle.net/BrvL2/1/
#logo {
position:absolute;
background-image:url(http://placehold.it/150x150/f16b20/ffffff);
background-size:150px;
width:150px;
height:150px;
margin:0 auto;
z-index:999;
top:0px;
margin: 0 auto;
left:0px;
right:0px;
}

#bar {
margin-top:50px;
width: 1920px;
height: 30px;
background-color: #2E2E2E;
border: 3px groove #FFD700;
text-align: center;
}
#logo {
position:relative;
background-image:url(http://placehold.it/150x150/f16b20/ffffff);
background-size:150px;
width:150px;
height:150px;
margin:0 auto;
z-index:999;
top:0px;
}
<div id="bar">
<div id="logo">
</div>
</div>
Hope this works for you.

Here's the CSS:
#wrap {
position:relative;
width:100%;
}
#bar {
position:relative;
margin-top:50px;
width: 100%;
height: 30px;
background-color: #2E2E2E;
border: 3px groove #FFD700;
}
#logo {
position:absolute;
background-image:url(http://placehold.it/150x150/f16b20/ffffff);
background-size:150px;
width:150px;
height:150px;
left:50%;
margin-left:-75px;
margin-top:-50px;
z-index:999;
top:0px;
}
I put in a wrap, so the #logo would have a parent container to reference when positioning. This will float the logo in the middle of the menu bar.
Here's the fiddle: http://jsfiddle.net/BrvL2/3/

alter the 'left:' attribute until it is centered
#logo {
position:absolute;
top:0;
left:45%;
right:0;
z-index:1000;
background-image:url(../img/LOGO1.png);
background-size:150px;
width:150px;
height:150px;
}