*{
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>
Related
div.container{
border:1px solid red;
position:relative;
}
span.parent{
display:inline-block;
width:30px;
height:30px;
border:1px solid gray;
border-radius:50%;
text-align: center;
position:absolute;
right:20px;
top:10px;
}
span.child{
background:green;
width:80%;
height:80%;
display:inline-block;
border-radius:50%;
left:10%;
top:10%;
position:relative;
}
<div class="container">
<p>some info goes here</p>
<span class="parent"><span class="child"></span></span>
</div>
I am trying to create a filled circle with border, but getting not the fill properly centered. how to fix this?
Another way to do this is by using Flexbox.
If you add the following to your parent:
display: flex;
align-items: center;
justify-content: center;
And remove the relative positioning from the child element, the child element will be centered inside the parent.
div.container{
border:1px solid red;
position:relative;
}
span.parent{
display: flex;
align-items: center;
justify-content: center;
width:30px;
height:30px;
border:1px solid gray;
border-radius:50%;
text-align: center;
position:absolute;
right:20px;
top:10px;
}
span.child{
background:green;
width:80%;
height:80%;
display:inline-block;
border-radius:50%;
}
<div class="container">
<p>some info goes here</p>
<span class="parent"><span class="child"></span></span>
</div>
Edit: If you encounter a problem with flexbox circles being squashed on smaller resolutions, try using min-height and min-width, and using margin: auto for centering instead of display: flex.
Give left:0; to span.child class.
div.container{
border:1px solid red;
position:relative;
}
span.parent{
display:inline-block;
width:30px;
height:30px;
border:1px solid gray;
border-radius:50%;
text-align: center;
position:absolute;
right:20px;
top:10px;
}
span.child{
background:green;
width:80%;
height:80%;
display:inline-block;
border-radius:50%;
left:0;
top:10%;
position:relative;
}
<div class="container">
<p>some info goes here</p>
<span class="parent"><span class="child"></span></span>
</div>
Just Change the position to position:absolute in place of position:relative for child span span.child.
div.container{
border:1px solid red;
position:relative;
}
span.parent{
display:inline-block;
width:30px;
height:30px;
border:1px solid gray;
border-radius:50%;
text-align: center;
position:absolute;
right:20px;
top:10px;
}
span.child{
background:green;
width:80%;
height:80%;
display:inline-block;
border-radius:50%;
left:10%;
top:10%;
align:center;
position:absolute;
}
<div class="container">
<p>some info goes here</p>
<span class="parent"><span class="child"></span></span>
</div>
You can use position: absolute in child instead to center it
span.child{
background:green;
width:80%;
height:80%;
display:inline-block;
border-radius:50%;
position:absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
}
I also changed the value of left and top, and added transform:translate() to make sure it is always centered regardless of browser size
div.container {
border: 1px solid red;
position: relative;
}
span.parent {
display: inline-block;
width: 30px;
height: 30px;
border: 1px solid gray;
border-radius: 50%;
text-align: center;
position: absolute;
right: 20px;
top: 10px;
}
span.child {
background: green;
width: 80%;
height: 80%;
display: inline-block;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div class="container">
<p>some info goes here</p>
<span class="parent"><span class="child"></span></span>
</div>
Just Changed the position:relative to position:absolute of span.child
div.container{
border:1px solid red;
position:relative;
}
span.parent{
display:inline-block;
width:30px;
height:30px;
border:1px solid gray;
border-radius:50%;
text-align: center;
position:absolute;
right:20px;
top:10px;
}
span.child{
background:green;
width:80%;
height:80%;
display:inline-block;
border-radius:50%;
left:10%;
top:10%;
position:absolute;
}
<div class="container">
<p>some info goes here</p>
<span class="parent"><span class="child"></span></span>
</div>
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,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAFoAtAMBIgACEQEDEQH/xAAbAAACAgMBAAAAAAAAAAAAAAADBAIFAAEGB//EAD4QAAIBAwIDBQQGCQMFAAAAAAECAwAEERIhBTFBEyJRYXEGMoGRFEJSobHBBxUjM1OSotHwg+HxFiQ0Q2L/xAAaAQADAQEBAQAAAAAAAAAAAAABAgMABAUG/8QAKREAAgIBBAIBAgcBAAAAAAAAAAECEQMSEyFRBDFBBWEiMkJScYGRBv/aAAwDAQACEQMRAD8A9He3PhWkhIFXjWeeVQ+gt4VCmWtFMYj4UJ4vKrw2DnpQm4fJ4UysFoo2i9RQXh/zFXx4fJ/DoL8PfrGflVFIVnPvEw5AGh4x7ykeYq+fh5+z/SaH+rGbkn9NUUyTiUjtIRjZh5igtkHYCr5uDuP/AFtnyFCfhMv8A/y06mhHEon0t7yKD5GhGNPsVdtwS4blD9+KE3AbrGOzA9WFOpom4srBEgGQh+GKi0Mkg/Zq5+FOj2duBcNMqorsApJc7gcvxoycBueZnhU+pNNqXYpRtbsD31b5Vo24IJOwHVhir79RMNzcKfDEZ/vXn/6TYPonELOEOzJ2atg8s6t9vlReShKOg+jMy6ogCPEHIqOi4UaQgx6VxnsHDNce0Vtbwl1jdZDNo+yM4z8a9VXgqLk/SrgeAxn86KnasU5sWrEZdd/WhyRCMYWP+qupHDArZ7Z38mAFGPDbNie0Dnbl5/OjrZqicSVLclyfAHNDNtI5x2TfGu2ksYW7qxBQOozn8aXk4TAwx3z60VkfQJQj2ciLHbvYB+FZXT/qWLzrKfWyemJ6YRWsGlE4rZycpgD4Haprf27DuyA+m9eVuQ7PX0PoORWsUA30P2j8jUDxCEfWrbkezaGMGtbjkaVPEoPEVA8Ut/GtuI2hjZB+0fnUSnmaTbisP2jVB7Qe3VnwhSiI1xcD6gwoHqf86Z5imjLVwgOB1Jj8TUTGDXlF5+k/i8ndt7a1h8Ni5/H8qQk/ST7Qg4E0C/6ANUUZGeLiz2Tsx5VExDntXklv+lbi8Uim7s7SZB7wXUhPockV1PCva234rwyVorqQFy2rUdMkOeQ28OhpZNwVv0LtHYGEeAqJh8qoD7SJ0dD6VA+1Sh9OFA051flQ3BNtF+0QG5wPWuV9v/ZdOPcKZ7Zo1v7YF4SzAahzKk9B+dEl9qYyc90mlpPactsHQbcmyc1tywbSPN+Hy8T9lr+eK1lj+mHCOY1EgfqACRkg/DO3lXtcZBhjM5RJSgLpn3TjcfOuDubqxn4tDxOSKJriKMqp3x5HHiBnH+wpqTj6HdsDPXc1oZK9sv5DxzhGOOFV7OyJg/ix/wAwqOYf4sf8wrim40n1gB1900F+MrrZS6oVGd15jGdvnT7sOzk25dHbtJbgnM0e3/1WtUJ3EqY9a4Me0WqMEXD+Y00u/tIvW4Ph7tbdh2Dbl0ehFoc/vE+dZXm3/UsfWaT4JWqO5D9wNuXR3ZbKKcjcUIzyJtGzZ6gU3J7QWxiVordiNO2cCqu69oJtZaJEiOMeNeG4Rv2e0m+g7XN4DgCf+U0Ca4vFzr7VcfaGPxqsm4xfS5Anf0WkJLicnLuo8c9aosUvgzfZaS37j3pjnyblVdNfSI2pWYb95gdzSpmLHTqyT9kAUoxMpT9ruzYO3KnWqHsm2mW1hxOdrg6neREV30E7nC5x8cY+Nczxx3+nzhn7TsnMer7TA95vi2T/AMVbcOuorbiI0jK6TgHq3h8eVU/FTm7nRiCRcNk+PeNex9MyQalaPL8/di4yinp+3xQp2JYaiwHXeln5DumnrkK1uN8YdT99HbBU16aSj+TgjinHOm27r+ijfYbijcJu5LS8BifHad1hRLuBW7xJBxVfErfSF0hjz2HOubNiahKTVo6lkTcY2dSOJhpQis4ODupG/pnaox8SlM3Z28bzyAHAZhjHn0NJ2ltDMH13A2XCxKBqzjfBzU+HQRRSyW6SXCzyDAzgYHPOa+TnOKumztoJpvz9YIpGo/thgfM0Ce5lV5DI6EJhcxufu5eFbuLY2za9ZIUgAy5xnFKXMd5LHIJbMMxbOtRy50Y5ZS+RWjP1g2vMUjYwcZzn8aeAuLmxhEdtJKzS5yCwzyGNiM8uXnUIL4Jwr6KbWIyF1KOI+8cbEHrVfd3PIjCkHcKTVv1exla5Qxci5ik0ypNDJjBEqFcn4jPjVvf8G4pw3h8NxPDEsbYBkjcEDI2Bxuc097MXHEuIWkunEsaYWNpWPfYnAU74JyRz8aS4jxyxkjuLabh7E7gAaVCsAQD3ccjv1qbuTr2PUauyjkeftFXtS6hScKcZ8qEr3LSkSSaNtteNuXjT8d9wJrZEu+G3Pb8u1guNOrzIbO/yqikEUmWJOBzwMY++qqDZJljJqTTouJ21KCdKjY+FZVayxrjUZBttuP71lNtvsHJ6dHdgW8R07FQKHLcDog+NVon/AOxtz17lSkm5Ac8U0cXJbXwHeVm5n4Chs4pdphufOgPdAZxXTGNexHKxxXOoY2/5oV4gwHKCEEY3fAb4VWtekMSoPrS8l25lMhJ1n62N6WdP0LyMpDdSzRBCFZ2AVwfdPjROKQdrN9It1xHL7y5GUcdD67H5+Fa4VxHN7FC2rBzpBHXBxVdFeQxTuU1GFzllYgHH4ZrnjLJGX4Dv8Lyl47/GrjLhr7E8l10MNuvjRnkIGUKtjp407HbW87K1nicMurkM0CWwMcrh2K4Pu45U8Pq7Tal7PVyf879K8uMXBaa54+f9sVd0lUH3gaVjhiMrvqGV3GDjR686nc67diMYZhnGefhQbYERNI4wzFjvyHTH3VfP58smHQvk+d8j6QvA8nTHJqXwuhsX/ZRL2DowbOcrgluRx6jB+NKX3EpjIskLtH3caPDbekLiIxS4ZlzzIOxHwoUOh5VWVyqE9Fzny51wLDG7NKVuy7hvpBYIG7J5F375I0g9Rj/DmtxT8TuppLVIlXWdblhgBeW2arbKZIp3Z3LhCAmds4Oxx+VWEfEIpGZnJR22DA+7U5w0t0gBpbVYQshvC8eohcgjOD5cqDcQ2P0ZRGHuJSd3AIpCWVZJsSzYVfd7uc0SWZZWYLlWzhQ3LGfu6UVCXHIS99m+KXPBIndv2kDFHjjZvc0tq6eOMVRzTpPeSSSa41ckk4zjNKSTSah7pHLbrS7zMTv+FUjBp2BsuOMNZ/rJEsGjMKKgzGcqTjc5qrJBjcHxHM+tQgde1UHPPbAo08EkcIcOoDchgb4q8I1FInFaVRC5ZcQ6Tt2Y5HzNZQZFZQgYBjp9ceVZRGs6+O6JtEHdLDTtpGNqlNdfs17x689vuqrW5CxKEXTsNyaHLOrHLNyp9aRht70E41VAXKZ3bakDOM93HyrYuB1G/lS62axxpoPtn4GgtMjZCFs+JNC+kJjeom4j05UDNHWI2w0cywTRSkklHDDHlSscvZ5caTgY3qGWdS+dWOYoJmKKSDvnlgYrfNh1cUWvD+OTWV5q7vYscFWHu+dX/E+LGGzWWaOHM4IQoO8wGM/DpmuBeQltR505NdzScNht3uS0SHKxlidJJ6DpXJl8WGSam/Z2YPMyYYtRf8DLcRZ9byKTJ0IGRS5dpowxLMR7xJzgUoLp9JwQBjGF2qUbFGB1aVbZt966JRXC6ObU5NuT5ZqQgHY79KLajE8TNyO9C7JZ5W0yYx9rarCztwIz2oOpT3cDzopK6AyMyhlVgBqAwaVfUhBY03GQx0A7kbdMGtFcHvrkeDHlTyhYLEZMhgW5c/WsaZg7YJ25Z9auTb2xjyH0jOdJYbUo9pBI+iN2dzzCr8980rhS5GUkyvR2blj400tkxj7WZ9G+AoGc8v71t7a3tZR20yt10KD99CuLgMx0tqQjAJ50l2+Ak1/erHAhdzhRgbmmyeyt9Nwco25Crq0H1pfhttIR9JMmhV2GfredGnjJj/aJKWO+5OMActvSlcuaTNQjIkOo6Wdx44xWURVQfvFyT67fKt0+oFG45squTtitNJg70qh7oqT8hQoUKZt8Y2rRloFY1MkAMZMcq0r6uZPwoNEi50aFY3G4EDR97flnp8qVZQDg5PnVhZqrGPUoOXwcim+IbSyoNkEZwvQd0VN5adGRz0gPTPzoOrxpxuR9KXIGobdasmGzUYGd9/Km1gkkHdiOMeH96NAAqZUAHHMVgJY945586dY0/YG6IrZsPfkCde7lj91OQ5gVuwDN2i7u2/3cqnaqpiOVBw3UUtcyOWjUu2krkjPnVViSVi6+Q57A7HKnxU1CVTISyhSMYwDSzbMcbb0VNgcf5zpKop7Ik6TjkRTEMiK80MRJbQTr28NwP96negBmwBypDhH/AJJ9PzFRy/lGiMNbRjM10zQR57oxl3NbitbaVQbWNpZMgZMmACR1J51rixOXGdhIcDw71NcK7qHTtp7QjHQ451zuTUbGF7wXyXMdvE8OoppK6+fPckgUjeTXTXJaTCsvd1RtlfTPKgcRZtb948/GsnJW9dFOFyO6OVWhGkmBskty6jAZfjvWUoedZVNCCf/Z" /></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.
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;
}
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;
}
This should work. I just want that the nested div is in the center of the parent div.
Is this at least the correct approach to center something, or am I way off the standards?
I'm just beginning to build my websites.
#container {
position:relative;
width:980px;
height:900px;
margin:auto;
border:1px solid red;
}
#logo {
width:960px;
height:305;
margin: 0 auto;
position:absolute;
}
and the markup
<body>
<div id = "container">
<div id = logo><img src="img/johndoe.jpg" width="960" height="305"/></div>
</div><!-- end of container -->
</body>
Actually, the nested div is at the leftmost of the container.
Remove position:absolute; for the logo.
remove possition:absolute; from .logo
#container {
position:relative;
width:980px;
height:900px;
margin:auto;
border:1px solid red;
}
#logo {
width:960px;
height:305;
margin: 0 auto;
/*position:absolute;*/
}
Try checking out http://codepen.io/skeep/pen/nGupC
html
<div class="container">
<div class="logo"><img src="http://placehold.it/350x150" alt="" /></div>
</div>
css
.container {
width:980px;
height:900px;
margin:auto;
border:1px solid red;
}
.logo {
width:350px;
height:150px;
margin: 0 auto;
}