I am trying to center text and images on a "content" div. I tried (margin: 0 auto;) and couple more and still not getting it. Also trying to center the div on the screen.
CSS:
#content {
width: 100%;
}
#content img {
width: 50%;
opacity: 0.75;
}
#content img:hover {
opacity: 1;
}
HTML:
<div id="content">
<img src="images/intro_7.jpg">
</div>
In #content, add text-align:center;:
#content {
width: 100%;
text-align:center;
}
UPDATE
Use table and table-cell to center is horizontally and vertically.
Surround your HTML with three div as follows:
<div class="outter">
<div class="center">
<div class="inner">
CSS:
.outter {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.center {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
}
JSFiddle Demo
More info here for vertical alignment.
Note: IE7 and below do not support display:table; or display: table-cell;
Related
I have enclosed an image inside a nested div .box. If it is not floated the image can be exactly centered to the .box, but when I float it left or right the center alignment goes away! I have 4 images with various sizes that need te be centered inside their own .box. How can I fix it?
HTML
<div class="con">
<div class="box">
<img src="../_images/icon-test.png">
</div>
</div>
CSS
.con {
width:300px;
height:200px;
background: #996600;
}
.box {
position:relative;
width:150px;
height:150px;
background-color: #333333;
display:table-cell;
text-align:center;
vertical-align:middle;
float:right;
}
You can use display: flex for this.
Change your display: table-cell to display: flex.
Then change text-align:center; and vertical-align:middle; to align-items: center; and justify-content: center; to center it vertically and horizontally.
Edit: Then I have also added a max-width of 150px to the image, to stop it expanding out of the container when the image is bigger than it. Props to #Hkidd for pointing out that this happens.
.con {
width: 300px;
height: 200px;
background: #996600;
}
.box {
position: relative;
width: 150px;
height: 150px;
background-color: #333333;
display: flex;
align-items: center;
justify-content: center;
float: right;
}
img {
max-width: 150px;
}
<div class="con">
<div class="box">
<img src="http://placehold.it/200x100">
</div>
</div>
Explanation
I think you have to position the img absolute, so it will be positioned absolute to its parent .box since .box is positioned relative. Also the display: table-cell; is unnecessary since the img is not inside a table.
This is what I came up with:
.con {
background: #996600;
height: 200px;
width: 300px;
}
.box {
background-color: #333333;
float: right;
height: 150px;
position: relative;
width: 150px;
}
.box img {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 90%;
}
<div class="con">
<div class="box center">
<img src="http://placehold.it/120x100">
</div>
</div>
If you have a single image as in the question, you can use the line-height solution which places the image exactly in center of the .box div & use vertical-align: middle on the image. Works on all browsers & simple to understand.
Refer code:
.con {
width: 300px;
height: 200px;
background: #996600;
}
.box {
position: relative;
width: 150px;
height: 150px;
background-color: #333333;
text-align: center;
vertical-align: middle;
float: right;
line-height: 150px;
}
img {
height: 60px;
vertical-align: middle;
}
<div class="con">
<div class="box">
<img src="http://www.w3schools.com/css/img_fjords.jpg">
</div>
</div>
html
<div style="display: block; height: 200px; width: 200px; background-color: red; position: relative">
<img src="http://www.kingsailfishmounts.com/Striped_Marlin_Plaque_(hotizontal)-mount-p-543.jpg" style="max-height:100%; max-width: 100%; position: absolute;"/>
</div>
This fits my image according to my div. What I want is no matter how big or small is image it should be displayed according to div.
If the image is vertical there should be blank space on top and bottom and if it is horizontal then left and right blank space. Image should not be stretched and the height and width of the div should be fixed.
I am able to do this but vertical image is aligned top and horizontal is aligned left. How can I make it on center ?
add left:50% & top:50% & transform: translate(-50%, -50%);
<div style="display: block; height: 200px; width: 200px; background-color: red; position: relative">
<img src="http://www.kingsailfishmounts.com/Striped_Marlin_Plaque_(hotizontal)-mount-p-543.jpg" style="max-height:100%; max-width: 100%; position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); "/>
</div>
Putting all together, and naming “wraptocenter” the class of the container, that’s the relevant CSS. Code for IE/Mac is wrapped in a suitable filter. Code for IE7-/Win is put in conditional comments.
<style type="text/css">
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: ...;
height: ...;
}
.wraptocenter * {
vertical-align: middle;
}
/*\*//*/
.wraptocenter {
display: block;
}
.wraptocenter span {
display: inline-block;
height: 100%;
width: 1px;
}
/**/
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
display: inline-block;
height: 100%;
}
</style><![endif]-->
And that’s the relevant HTML
<div class="wraptocenter"><span></span><img src="..." alt="..."></div>
<div class="maindiv">
<img src="http://www.kingsailfishmounts.com/Striped_Marlin_Plaque_(hotizontal)-mount-p-543.jpg" alt="tall image" />
</div>
img
{
max-width: 100%;
max-height: 100%;
display: block;
margin: auto auto;
}
.maindiv
{ border: 1px solid #888;
display:table-cell;
height: 100px;
width: 100px;
vertical-align: middle;
}
This should workmargin: 0 auto;
display: block;
max-width: 100%;
Here follow the code:
<div style="display:inline-block; height:200px; width:200px; background-color:red; position:relative; vertical-align:middle; text-align:center">
Great coding for you!
You can use below styles to the div for horizontal and vertical alignment.
display: table-cell;
vertical-align: middle;
text-align: center;
And avoid position for both div and img
Below style added for img for vertical centering.
display: inline-block;
vertical-align: middle;
Also I have separated HTML and style as in below sample.
div{
height: 200px;
width: 200px;
background-color: red;
display: table-cell;
vertical-align: middle;
text-align: center;
}
img {
max-height: 100%;
max-width: 100%;
display: inline-block;
vertical-align: middle;
}
<div>
<img src="http://www.kingsailfishmounts.com/Striped_Marlin_Plaque_(hotizontal)-mount-p-543.jpg" />
</div>
You should remove some of the stylings from div and all stylings from the img and assign the image a fixed width using width attribute as below:
HTML:
<div>
<img src="http://www.kingsailfishmounts.com/Striped_Marlin_Plaque_(hotizontal)-mount-p-543.jpg" width="150" />
</div>
CSS:
div {
height: 200px;
width: 200px;
background-color: red;
}
div img {
display: table;
margin: 0 auto;
}
Refer demo.
flex box is a good solution for this situation. Your code have to be modified a little bit like this:
#container {
/*flex box goes here*/
display: flex;
align-items: center; /* vertical center */
justify-content: center; /* horizontal center */
/* your old code goes here*/
height: 200px;
width: 200px;
background-color: red;
position: relative
}
#img {
/* you can change height and width to test the result */
max-height:50%;
max-width: 50%;
}
<div id="container">
<img id="img" src="http://www.kingsailfishmounts.com/Striped_Marlin_Plaque_(hotizontal)-mount-p-543.jpg"/>
</div>
I saw a lot of question How to align a div horizontally and vertically center and i got a answer also.
The code which i got:
Html-
<div class="outer">
<div class="middle">
<div class="inner">
<div align="center">
<h1>The Content</h1>
<p>Once upon a midnight dreary...</p>
</div>
</div>
</div>
</div>
Css-
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
background: blue; /*gave blue to know the height and width*/
}
And i got it correctly.
But i am not able to give a default height to it.
When i give width: 50%; and height: 50%; to class="inner" only the width is being accepted.
I am not even able to give padding space between top and bottom. Please help.
Please don't give me another code to align a div vertically and horizontally center
What (I think) you want, is this :
body {
margin : 0;
}
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.inner {
display: inline-block;
width: 50%;
height: 50%;
background: blue;
}
<div class="outer">
<div class="middle">
<div class="inner">
<h1>The Content</h1>
<p>Once upon a midnight dreary...</p>
</div>
</div>
</div>
See also this Fiddle!
You are not assigning height: 50% in the right place.
The 50% is taking half of inner div. What you need to do is to assign for the div inside of class 'inner'.
You can try flex box.
Add this code:
.inner {
margin-left: auto;
margin-right: auto;
background: blue;
height: 50%;
width:50%;
display: flex;
flex-direction: column;
justify-content: center;
}
Check it out at https://jsfiddle.net/ke5z9ukh/1/
I am looking to horizontally (and preferably vertically) align three inner divs. Applying margin: 0 auto; to class vbox should do the trick but as in the following minimal code, it isn't affecting the alignment at all. How can i accomplish this aligning?
HTML:
<body>
<div id='site'>
<div class='main'>
<div class='vbox'>
<div id='inner1'>inner1</div>
<div id='inner2'>inner2</div>
<div id='inner3'>inner3</div>
</div>
</div>
</div>
</body>
CSS:
#site {
width: 100%;
height: 100%;
}
#main {}
.vbox {
margin: 0 auto;
}
The result can be seen in this fiddle.
You need to define the width for vbox:
.vbox {
margin: 0 auto;
width: 30%;/*apply as your own*/
}
100% wide element is centered horizontally but you see no alignment for text. For this you should apply text-align: center;
Just give display: table; to .vbox will make it horizontal center.
.vbox {
margin: 0 auto;
display: table;
}
Working Fiddle
Another solution is display: flex;
.main {
display: flex;
}
Fiddle
You can use display: inline-block for your inner divs:
.vbox {
text-align: center;
font-size: 0; /* white spaces fix */
}
.vbox > div {
font-size: 1rem; /* white spaces fix */
display: inline-block;
}
Example
Try something like this
#site {
width: 100%;
height: 100%;
}
#main {
Width:100%;
}
.vbox {
margin: 0 auto;
padding:0;
}
.vbox div{
width:32%;
display:inline-block;
padding:0;
margin:0;
box-sizing:border-box;
}
The important bit is that the default behavior of a div is to take up the full width of its parent. To change this you give it the display mode inline-block.
You could do this :
HTML
<body>
<div id='site'>
<div class='main'>
<div class='vbox'>
<div class='inner'>inner1</div>
<div class='inner'>inner2</div>
<div class='inner'>inner3</div>
</div>
</div>
</div>
</body>
CSS
#main {
width: 100%;
}
.vbox {
width: 500px;
margin: 0 auto;
text-align: center;
}
.inner {
display: inline-block;
margin: 0 4px;
}
You could do this to align all 3 divs vertically by using:
#site {
width: 100%;
height: 100%;
}
#main {}
.vbox {
margin: 0 auto;
}
.vbox div{
width: 30%;
float: left;
}
If you have more divs or less, just update the width accordingly.
I'm having a bit of difficulty in displaying a table. I use display:table and display:table-cell a lot for sections usually. Especially when I just want to center the content of a section vertically. So to say, I have the following HTML:
<div class="wrapper">
<div class="cell">
<div class="red">
</div>
</div>
</div>
and the following css applied to the html:
html,body {
height: 100%;
}
.wrapper {
display: table;
width: 100%;
height: 100%;
}
.wrapper * {
width: 100%;
height: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
}
.red {
margin-right: auto;
margin-left: auto;
background: red;
height: 200px;
width: 200px;
}
Now there is a small problem. I want to add a section header to this particular section and the section header has to be a child of .wrapper, so the HTML changes as below :
<div class="wrapper">
<div class="section-heading">
<h1>section heading</h1>
</div>
<div class="cell">
<div class="red">
</div>
</div>
</div>
Now the problem with using display table and table-cell is that when I add a header to the section, I can't add it without it affecting the other child elements of .wrapper . So how do I add a heading (when the heading is added in the above HTML the .cell div seems to be moving horizontally slightly)?
Of course I could use absolute positioning, but I was just wondering, is there something that can be done, without taking the heading element out of the flow?
FIDDLE HERE
Did you try adding display:table-row to the section-heading?
.wrapper > .section-heading{
display:table-row;
height:auto;
}
Fiddle: http://jsfiddle.net/7xo353hg/4/
You can make heading container display: table-row:
.section-heading {
display: table-row;
text-align: center;
}
Check the demo:
html, body {
height: 100%;
}
.wrapper {
display: table;
width: 100%;
height: 100%;
}
.wrapper * {
width: 100%;
height: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
}
.red {
margin-right: auto;
margin-left: auto;
background: red;
height: 200px;
width: 200px;
}
.section-heading {
display: table-row;
text-align: center;
}
<div class="wrapper">
<div class="section-heading">
<h1>section heading</h1>
</div>
<div class="cell">
<div class="red"></div>
</div>
</div>