I have a div tag with fixed width and height and I want another div tag positioned at the exact center of the parent div. I have tried margin=auto but it doesn't solve the problem. Any pointers? Thanks
Try this: (fiddle)
div.outer {
display: table-cell;
width: 500px;
height: 500px;
vertical-align: middle;
text-align: center;
background: blue;
}
div.inner {
width: 200px;
height: 200px;
background: red
display: inline-block;
}
Related
I have this Page where you can see a bunch of buttons which are 'a' elements.
I need them to have the same height and set the text in the middle. Note that some of them have more than one line of text, then 'line-height' will not work.
I tried this, but not working:
.et_pb_button_module_wrapper .a {
height: 200px;
vertical-align: middle;
display: block;
}
.et_pb_button_module_wrapper .a{
height: 200px;
display: flex;
align-items:center;
min-height:100px;
justify-content:center
}
just use flexbox method and min-height as above.
You can align things in various way one of the good way is using table layout.
.et_pb_button_module_wrapper{
display: table-row;
height: 100px;
}
.et_pb_button_module_wrapper .a{
display: table-cell;
vertical-align: middle;
width: 200px;
height: 100px;
border: 1px solid #000;
line-height: 1.2;
}
table-cell can align it's content in vertical.
I searched over Stackoverflow though many posts but I didn't found the solution.
I'm trying to align my text vertically, using margin: auto;
It seems there is a margin collapsing problem, if you wanna check this example:
// HTML
<div class="outer">
<div class="inner">Hello</div>
</div>
<div class="outer2">
<div class="inner">Trying to center this text vertically</div>
</div>
// CSS
.inner {
margin: auto 0;
height: 20px;
color: white;
}
.outer {
background-color: red;
}
.outer2 {
background-color: blue;
height: 200px;
}
If you want to play on my code, click here
I don't believe there's a good way to vertically align content using margin: auto 0 like you've set it up. To get the inner divs vertically centered, here's a simple way by modifying .inner:
.inner {
height: 200px;
color: white;
line-height: 200px;
}
The display does the magic. Display: table-cell on inner and display: table on outer div. And finally on inner div you put vertical-align: middle or whatever position that you want.
.inner {
display: table-cell;
vertical-align: middle;
height: 20px;
color: white;
}
.outer2 {
text-align: center;
background-color: blue;
height: 200px;
display: table;
width: 100%;
}
I would advise you to use flexbox
add this to outer2 class
.outer2 {
background-color: blue;
height: 200px;
display:flex;
align-items:center;
}
And for horizontal align you can use justify-content:center
align-item:center will align items in center of div vertically ,
.outer2 {
display: flex;
justify-content: center, left;
background-color: blue;
height: 200px;
}
you are trying to align the entire inner div by giving margin:auto. You can use text-align: center if you want to align the text. If you need to align the entire div then mention height and width for inner div. I have posted fiddle link please check
http://jsfiddle.net/ajaycoder/n1rz0bts/4/
.inner {
margin: auto ;
color: white;
width:50%;
border: solid 1px red;
height:50%;
}
Very basic question here, but it has been puzzling me for hours:
How do I make a relatively positioned div span its absolutely positioned content?
http://jsfiddle.net/X6ay2/10/
HTML
<div class="outer">
<div class="inner"></div>
</div>
CSS:
.outer {
display: inline-block;
position: relative;
background: blue;
height: 100px;
padding: 20px;
}
.inner {
position: absolute;
width: 50px;
height: 50px;
background: red;
}
You can't directly really, as absolute positioned elements are out of the document flow and so don't really 'belong' to their parents anymore. A kind of workaround though is to set the absolute positioned div to 100% width and left:0, which will force it to extend to the width of the parent.
.outer {
display: inline-block;
position: relative;
background: blue;
height: 100px;
padding: 20px;
}
.inner {
position: absolute;
width: 100%;
left: 0;
height: 50px;
background: red;
}
http://jsfiddle.net/X6ay2/14/
A caveat to this is if the inner div has padding, it will extend beyond 100%. To stop this, make the inner div use the border-box box-sizing property.
.inner {
padding: 10px;
box-sizing: border-box;
-moz-box-sizing:border-box;
}
http://jsfiddle.net/X6ay2/15/
set width of the outer to suit your needs. The example has
width:50px
http://jsfiddle.net/X6ay2/12/
I made box and I set line-height, the text is automatically vertically center. Is there a way or any kind of trick to set the text on the bottom of the box?
div {
width: 100px;
height: 100px;
background: #eee;
color: #333;
text-align: center;
line-height: 100px;
vertical-align: text-bottom;
}
<div>FoxRox</div>
2020 Update
You can use CSS grid, flexbox or the original method with line-height:
body { display: flex } /* just to prettify */
div {
margin: .5em;
width: 6.25em; height: 6.25em;
background: #eee;
color: #333;
text-align: center
}
.grid {
display: grid;
align-content: end;
}
.flex {
display: flex;
align-items: flex-end;
justify-content: center
}
.lh { line-height: 11.5 /* 6.25*2 - 1.5 */ }
<div class='grid'>Hello</div>
<div class='flex'>Hello</div>
<div class='lh'>Hello</div>
Setting the height of the div and the line-height of the text to the same value, 100px in your case, is a method of vertically centering the text within the div. That's the problem.
The solution is to change line-height to twice the height minus the size of the text and remove useless vertical-align.
Enclose the text in a p tag with display:inline-block. Set vertical-align to the p element.
<div>
<p>FoxRox</p>
</div>
div {
width: 100px;
height: 100px;
background: #eee;
color: #333;
text-align: center;
}
p {
display: inline-block;
vertical-align: -80px;
}
Demo
You could set display to table-cell, try this CSS for example.
width: 100px;
height: 100px;
display: table-cell;
vertical-align: bottom;
Demo: http://jsfiddle.net/Kawwr/
You could check out my answer to https://stackoverflow.com/a/6116514/682480.
Here is the demo for the above answer.
The trick is to use display: table-cell on the outer container. That way you can use the vertical-align: bottom and display: inline-block; on the div.
See: http://jsfiddle.net/b2BpB/1/
Q: How can you make box1 and box3 align to the top of the parent div boxContainer?
#boxContainerContainer {
background: #fdd;
text-align: center;
}
#boxContainer {
display: inline-block;
border: thick dotted #060;
margin: 0px auto 10px auto;
text-align: left;
}
#box1 {
width: 50px;
height: 50px;
background: #999;
display: inline-block;
}
#box2 {
width: 50px;
height: 100px;
background: #999;
display: inline-block;
}
#box3 {
width: 50px;
height: 50px;
background: #999;
display: inline-block;
}
Help much appreciated...
Acknowledgement: This question is forked from an answer previously given by https://stackoverflow.com/users/20578/paul-d-waite : Getting a CSS element to automatically resize to content width, and at the same time be centered
Try the vertical-align CSS property.
#box1 {
width: 50px;
height: 50px;
background: #999;
display: inline-block;
vertical-align: top; /* here */
}
Apply it to #box3 too.
As others have said, vertical-align: top is your friend.
As a bonus here is a forked fiddle with added enhancements that make it work in Internet Explorer 6 and Internet Explorer 7 too ;)
Example: here
You can add float: left; for each of the boxes (box1, box2, box3).
http://jsfiddle.net/Wa4ma/
Use vertical-align:top; for the element you want at the top, as I have demonstrated on your jsfiddle.
http://www.brunildo.org/test/inline-block.html
Or you could just add some content to the div and use inline-table