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.
Related
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%;
}
when I delete the vertical-align in div.content:before selector, the text will pull down and can't show completely, so what's the pseudo class do and why this works?
PS: Is there any other way to implement like the demo shows, namely align the text in the middle and text will begin in a new line if it is too long.
here is the demo: http://jsfiddle.net/yougen/8WhNZ/
html:
<div class="wrapper">
<div class="content">
<span>Mix Color Lace Dress</span>
</div>
</div>
css:
div.wrapper {
position: relative;
width:120px;
}
div.content {
width: 120px;
height: 80px;
text-align: center;
background: rgba(51,51,51,0.5);
}
div.content:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
div.content span {
display: inline-block;
width: 80px;
font-size: 14px;
font-weight: bold;
vertical-align: middle;
color: white;
}
The before pseudo element is just at the left of your real content. Its function is to have a 100% of the height of the container and precisely has a vertical-align: middle to force every element on the same line (in this case, your span) with the same vertical-align: middle to be shown in the middle of the container, although it hasn't the 100% of the height.
This trick is used when you don't know the height of the element that you want to align in the middle. In other cases you can play with vertical margins, for example, but here we need a pseudoelement with a known height (100% of the container).
Look at that: http://jsfiddle.net/7hUqs/
#element-1 {
height: 50px;
background-color: blue;
vertical-align: middle;
}
#element-2 {
height: 100px;
background-color: yellow;
vertical-align: top;
}
#element-3 {
height: 70px;
background-color: green;
vertical-align: middle;
}
#element-4 {
height: 80px;
background-color: pink;
vertical-align: middle;
}
The vertical-align: middle works with the silbing elements that have the same came of vertical-align. All of them, as a block, will be aligned with the other elements of the line and its vertical alignement (in this case, top). And the height of the line is the maximum height of its elements, not the height of the container. A little weird, but this is the thing.
try this
div.content:before {
content:'';
display: inline;
height: 100%;
margin-top:10px;
margin-right: -0.25em;
}
div.content span {
display: inline;
width: 80px;
font-size: 14px;
font-weight: bold;
vertical-align: middle;
color: white;
}
fiddle demo
Was wondering if anyone can show me best way to vertically align my image in image col and have the column equal in height to the text col?
CSS
*{padding:0;margin:0;}
.col{
width: 50%;
float: left;
height: 100%;
}
.col-text {
background: silver;
}
.col-img {
background: red;
display: inline-block;
text-align: center;
}
.col-img img {
display: inline-block;
vertical-align: middle;
}
.cf:after{
content:"";
display:table;
clear:both;
}
}
JSFiddle http://jsfiddle.net/LUpmG/1/
This is my version: http://jsfiddle.net/LUpmG/2/
In short, you need to get rid of floats, use display: table-cell, and apply vertical-align: middle to the container.
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;
}
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.