i know that this question has been asked many time but none of the solution is working for me. i simply want to align one label inside one div that is associated with a twitter-bootstrap class. but it is not being aligned. I have tried horizontal alignment with this and it was working fine. without bootstrap it was working fine but with bootstrap it stopped working.
any idea how it will work ?
Address the label instead
.center{
width: 100px;
height: 100px;
border: 1px solid red;
display: table;
}
.center label {
display: table-cell;
vertical-align: middle;
}
forked jsFiddle http://jsfiddle.net/s5dJH/
Here you go
with the use of
display:table;
and
display:table-cell;
vertical-align:middle;
This way the label will always be centered, even if you resize the box
http://jsfiddle.net/s7Wb4/2/
You can use line-height to your label and set it the same height as your div. This will align it perfectly.
See this demo.
try this
http://jsfiddle.net/s7Wb4/9/
.center{
width : 100px;
height : 100px;
display : table-cell;
float:none !important;
vertical-align : middle;
border : 1px solid red;
}
Related
I know how to align text vertically inside a div, but I am unsure on how to do it if the div has a percentage height and width. Here is my code:
<div id="header">
<h1>Home</h1>
</div>
#header {
background-color: red;
color: white;
text-align: center;
vertical-align: middle;
width: 100%;
height: 15%;
}
Now on my webpage the text in the div has been aligned correctly horizontally but not vertically. How do I fix this problem? Can you also try to explain your answers and keep them as simple as possible please (I'm still relatively new at HTML/CSS). Thank you.
You can use the flexbox model to easily center things.
Just add the following rules to your container:
display:flex;
justify-content: center; //horizontal centering
align-items:center; //vertical centering
FIDDLE
Note this is probably a more general solution than what you expected, but what's really cool about flexbox is that it works in many different cases, including yours (example with an h1 tag here).
Try giving display:inline-block to your h1 tag.
DEMO
You can just add:
display:inline-block
to your h1
example: http://jsfiddle.net/24pwprvf/
Add line-height matching the height of the container:
#header {
background-color: red;
color: white;
text-align: center;
vertical-align: middle;
width: 100%;
height: 15%;
line-height: 0.15em;
}
You should not use line-height for the effect you desire as suggested by Praveen Above.
You can get the same affect by either putting, 'display: inline-block' in either the #header div or in the #header h1 css style.
the first part is not advisable.Best practice will be to use it in the h1 style only.
Could you help me align vertically (on blue background) text and icons (fb, etc) ?
I tried to use vertical-align, display:table, etc. But it didn't solve my problem.
http://tinyurl.com/pe4avff
Please help me. Thanks!
You probably didn't use display and vertical-align properties in the right way.
Use the following styles:
.align {
display: table;
height: 100%;
...
}
.vertical {
display: table-cell;
vertical-align: middle;
}
Also notice that this is a common practice for vertical alignment, but not the only one.
You could also do:
.vertical {
display: table-row;
line-height: 2em;
}
Which is basically setting line-height of the text in your div to the same value as your divs height.
Remove float: left from CSS classes bar-menu-left, bar-menu-right and bar-icons.
If what you want to do is to vertically align all text and icons you should remove
float:left; from the .bar-menu-left, .bar-menu-right and .bar-icons classes.
I have elements from a div that goes out of their container because I use line-height. But the only way I found to make vertical-align work is by using line-height.
Can anyone explain me why I have that behavior and how to fix it ?
Also do anyone have advices or best practices on how to use vertical-align ?
Here is the code :
#resources {
background-color: green;
width: 100%;
height: 64px;
}
.resourceContainer {
float: left;
text-align: center;
vertical-align: middle;
line-height: 64px;
width: 33.3%;
}
Example (Don't pay intention to images path)
You just need to reset the line-height for the inner div (because the line-height is inheritant):
.resourceContainer > div {
display:inline-block;
line-height:100%;
vertical-align:middle;
}
Demo
NOTE: The vertical-align is applied to the element itself not to the child elements. So you don't need to set vertical-align:middle for the .resourceContainer, instead set it for the direct inner div.
I am running into this problem with how divs align in Firefox and Chrome.
I need two divs with undefined widths to be side by side in a wrapping div. The idea is to produce a long scrollbar full of content.
The problem I am having is that in Firefox 22.0 the divs end up stacking while in Chrome 28.0 it is working fine. Here are two screenshots of the problem.
Firefox
Chrome
Is this a Firefox quirk? Is it an issue that can be fixed with a display or clear property?
Instead of floating the elements to the left, you can use display: inline-block; with white-space: nowrap;
Demo
#wrapper {
display: inline-block;
border:2px solid red;
white-space:nowrap;
overflow:hidden;
}
#images {
height:200px;
border:4px solid blue;
display: inline-block;
overflow:hidden;
}
#thumbs {
height:100px;
border:4px solid green;
display: inline-block;
}
Instead of using float: left use display: inline-block; and vertical-align-top in both the child divs style class.
Additionaly could you be use a vertical-align: top to the image properties to align images to the top of div container
Need to show the div width in percentage when the image is missing. Since images are loading dynamically I cant fix the image size. All image sizes are mentioned in percentage. So how do we get the div proper width when there is no image loaded.
Here is the demo.
http://jsfiddle.net/7LfMV/2/
Try to change table-cell to inline-block - http://jsfiddle.net/7LfMV/4/
.wraptocenter {
display: inline-block;
text-align: center;
vertical-align: middle;
width: 60% /*Div should take this width*/;
background-color:#999
}
http://jsfiddle.net/7LfMV/5/
remove display: table-cell; and add an height to the div
Use min-height, min-width to set the height, width when there is no image.
Since you are using display:table-cell I guess you are centering the image inside the div, this will do it.
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
border: 1px solid red;
min-height:300px;
min.width:300px;
}
Fiddle Here http://jsfiddle.net/7LfMV/6/