I know how to vertical align the text by reducing the height of inner div and assigning it absolute positioning with top,bottom,left,right= 0,margin:auto properties
I also know display:flex layout but it also does not work properly.
problem is display:table and vertical-align does not work properly with bootstrap classes. My div is simple i assigned it proper height , my inner div has reduced height so it should vertically align but it does not. I used bootstrap. I do not want to use absolute position to center it. Any idea?
<div class="col-sm-3" style="height:65px;display:table;vertical-align:middle;">
<div style="display:table-cell;vertical-align:middle">abcabcabc</div>
</div>
When you are using bootstrap, vertical align is done with "display: inline block"
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
You can check here - http://plnkr.co/edit/vPKRjAf4wgtzJ7VVdOPN?p=preview
what about using line-height? if line-hight is equal to its hight the text is centered vertically
#test {
width: 100%;
height: 100px;
background-color: green;
line-height: 100px;
font-size: 32px;
text-align: center;
}
<div id="test">
Test Text
</div>
Hope this helps
Problem was with my div , i set its dimensions upon removing stuff, things worked out. Thanks.
Related
Buttons have a magic property where you can use margin: auto on them without setting a width. I'd like to be able to do this with a div. Is it possible?
div, button {
background-color: #FFA;
display: block;
margin: auto
}
<div> Center me </div>
<button> I Center Magically </button>
They do this by having a sort of magic internal sizing function which makes them only as big as their text:
Why doesn't "display: block" & "width: auto" stretch a button to fill the container?
I would like to know if I can make a div do this, without wrapping it in any containers (I know flex box around it would work).
Can I make a div shrink to text-width like a button, while still being display block, without necessitating a specific container?
EDIT: inline-block will not work for my use case.
Simply set a width on the <div> of fit-content:
div,
button {
background-color: #FFA;
display: block;
margin: auto
}
div {
width: fit-content;
text-align: center;
}
<div>Center me</div>
<button>I Center Magically</button>
Use display:table and you will have better support than fit-content (it doesn't work on Firefox, Edge and IE)
div,
button {
background-color: #FFA;
display: table;
margin: auto
}
<div> Center me </div>
<button> I Center Magically </button>
buttons will have inline-size:fit-content by default.
width:fit-content dose the same effect.
I have an answer on another question, where you can find spec ref.
I got my link to look and function as i want but for some reason the arrow refuses to align middle with the text on hover
https://jsfiddle.net/Lo24dopt/
<div id="hero-content">
<span>Learn more </span></div>
Please note that vertical-align works on display: table-cell only.
https://jsfiddle.net/Lo24dopt/1/
#hero-content{
width: 100%;
display: table;
}
#hero-content a {
display: table-cell;
}
Give vertical align to the parent div instead of anchor tag.
This has probably been done before but I can't find a solution for my specific case. I have the following:
<div class="holder" style="height:260px;width:260px;">
<img src="image.jpg" />
</div>
How can I get the image to align into the middle of the div?
Normally, img is an inline-element, which means, that it's being aligned to the baseline of the text of your parent-element. This leaves a nasty space underneath your image.
You can prevent this with
img{
display:[inline-]block; /* or inline-block if the img isn't the only element in your div*/
}
This removes the reserved space underneath the image.
you can change the alignment by
img{
vertical-align: [top|middle|bottom|baseline|...] ;
}
to align it according to your text.
In general, you can only vertical-align inline elements. So an image with display:block won't be affected by a vertical alignment declaration.
Add
text-align: center;
vertical-align: middle;
display: table-cell;
to the div's style.
Try :
.img
{
display: block;
margin-left: auto;
margin-right: auto
}
If this is your mark up then you can use line-height property for this. Like this:
.holder{
line-height:260px;
}
This is my relevant page markup:
<div id="header">
<div id="logo">
Home
</div>
<div id="user_box">
test
</div>
</div>
And my relevant CSS:
#header {
width: 960px;
height: 110px;
}
#logo {
background: url('/assets/img/logo.png') no-repeat center;
width: 300px;
height: 110px;
float: left;
}
#user_box {
width: 300px;
height: 60px;
float: right;
vertical-align: middle;
}
Now, I want to position the user_box div in the vertical middle of the header div. After a lot of Google'ing and experimenting, I have learned that this isn't easy. Apparently, I can't vertical align a block element such as a div. So I'm looking for a different way to do this.
I saw the hacky display: table; method and tried using it, but it didn't change a thing. Also tried changing the element to an inline element like a span, but that didn't work either. I even tried using margin: auto 0; for some god awful reason, and that also didn't work at all.
So I'm asking for help. How do I vertically align this div inside my header div?
Thanks!
Set the line-height of user_box equal to the height of header
Working demo: http://jsfiddle.net/AlienWebguy/pyppD/
vertical align doesn't work with divs its for aligning elements in tables. In your case you could just use this
#user_box { margin-top:25px; } /*110-60 = 50/2 = 25*/
So I fiddled around with your code a little bit, and here's what I got: http://jsfiddle.net/3k8XE/
As you can see I'm using a table as the header, and applying the same id to each element, except the two inner divs have changed to td's. I've added an inner td to compensate the space between the two divs since they were originally set to float:left/right.
(Of course the borders are just to show what's actually going on here.)
As I have an element with a percentage height I can't use the line-height hack. Does anyone have any ideas on how to solve this?
<div height="100%">
I want to be vertically aligned in the middle
</div>
Here's what you want: http://www.jakpsatweb.cz/css/priklady/vertical-align-valid-solution-en.html
You have to set the height value of div, then set line-height: value_of_div_height. line-height 100% won't work because it will take value of text, not div element. It works with or without vertical-align, as long as height=line-height
div {
height: 200px;
line-height: 200px;
display: block;
}
Alternative method if you want to do with a paragraph inside a div element: http://www.w3.org/Style/Examples/007/center
DIV.container {
min-height: 10em;
display: table-cell;
vertical-align: middle }
...
<DIV class="container">
<P>This small paragraph...
</DIV>
If you set the font-size, and you know the number of lines of text you have.
You can wrap the text in a span. And use the following CSS on the span.
span {
font-size:20px;
margin-top:-10px; //half the font-size (or (font-size*number of lines)/2)
position: relative;
top: 50%;
}