I am trying to center a div inside a table-cell element. I really tried all the previous answers but I simply could not figure it out. Here is the code I am using:
HTML skeleton:
<div class="selection">
<div class="selection_empty">
<p>No selection.</p>
<p>Click the button below to start the process.</p>
<span class="selection_icon ico_add_medium"></span>
</div>
</div>
CSS style:
.selection {
display: table-cell;
width: 50%;
padding: 0 10px 0 10px;
}
As I mentioned, I tried everything I found on but nothing did the trick. I would really appreciate your help! Thank you!
Add vertical-align: middle because is a table cell style, if you change the table cell style the trick will be other, but without changing nothing:
.selection {
display: table-cell;
width: 50%;
padding: 0 10px 0 10px;
vertical-align: middle;
}
I add the fiddle link to show this works:
https://jsfiddle.net/qL5sf9uo/
Related
I am trying to vertical align middle for my input and a tag element inside a div.
I have
<div id='title-container'>
<img id='logo' src='images/topLogo.png'>
<div id='search'><input type='text'><a id='btn' href='#'>test button</a></div>
</div>
I want to display something like
--------------------------------------------------------------------
| ---------------------------
| | topologic.png | my input box test button
| ---------------------------
|____________________________________________________________________
CSS
#title-container{
height: 80px;
vertical-align: middle;
background-color: yellow;
}
#search{
display: inline-block;
vertical-align: middle;
}
I want to vertical align my input box and test button inside my title-container div and float these two items to the right.
I have tried adding
#search{
display: inline-block;
vertical-align: middle;
float:right;
}
but those element will be on top of the title-container div instead of middle.. Can someone help me about it? Thanks.
The vertical-align property in CSS doesn't do what you'd expect. Typically, inline elements can be vertically aligned in their context via vertical-align: middle. But the context is the height of the text line they’re in, not the parent.
See http://phrogz.net/CSS/vertical-align/index.html
This should do the trick.
HTML:
<div id='title-container'>
<div id='logo'><img src='http://placehold.it/60x40' /></div>
<div id='search'>
<input type='text' />
<a id='btn' href='#'>test button</a>
</div>
</div>
CSS:
#title-container{
height: 80px;
}
#logo, #search {
display: inline-block;
height: 100%;
position: relative;
line-height: 80px;
float: right;
}
#logo {
float: left;
}
#logo img {
vertical-align: middle;
}
See the example.
When you want to play with vertical-align, you need to be aware that stuff like images have default vertical-align values set. This means, even though you set it to be middle for your parent container, it is being set as text-bottom on the image itself, by default.
You need to force it for all your elements inside that you want to act the same way:
http://jsfiddle.net/H9XBA/
#title-container img#logo,
#title-container #search { vertical-align: middle; }
... and it will vertically align :)
Generally, for logo's, I like wrapping them in a DIV and then adding an id to that DIV.
Another way you can vertically-align them to the middle is by using
display: table
for the parent div... and for the children that you want to align middle you put:
display: table-cell;
vertically-align: middle
You can check out an example here:
http://jsfiddle.net/combizs/QGg6P/
I've been encountering some problems. I dont know why my div.clear does not do the job. As you can see the button next should be surrounded in the red div. Please check my source thanks!
http://www.w3dominik.com/x/vocabito/dashboard.php
<div id="buttonsx">
<div id="next">next</div>
<div class="clear"> </div>
</div>
Simply add overflow:auto to the button. It works - I tested it.
#buttonsx {
padding: 10px;
color: #fff;
background-color: red;
overflow: auto;
}
The reason this was occurring was because the content was collapsing on the button, as it didn't have a set height. Setting overflow:auto will force the parent to contain the child.
You have this in your main.css at line 126
#buttonsx>div {
border-radius: 5px;
display: inline-block;
float: left; /* <-- this is the problem */
}
This float: left; rule is causing the problem, if you remove float: left; from this, it'll work as it suppose to do.
Screenhot:
is there a better way to fix the height of a child to the main parent height?
I tryed so but it doesn't works for me:
.child {
background: none repeat scroll 0 0 #5B6567;
border-radius: 5px 0 0 0;
display: inline-block;
float: left;
line-height: 30px;
padding-top: 6px;
position: relative !important;
text-align: center;
width: 12%;
height:100%
}
<div class="row-fluid">
<div class="child">
child
</div>
</div>
jsfiddle http://jsfiddle.net/WTmt6/1/
check I want the grey left div to fix the height of the red one big .media div
ps: I can't use fixed/px dimensions I only use percentage/% on my layout
I'm still not sure if I understand the problem...
First of all, remove the padding on child as it is going to cause trouble with the height:100%. You should add the padding in an inner div:
.inner {
padding:6px;
}
<div class="child">
<div class="inner">child</div>
</div>
The height 100% is working fine. Here is an example of 3 childs (two of them are equal), floating inside a floating parent without problems: http://jsfiddle.net/qRPYt/7/
If you are still having trouble, please, post the CSS of row-fluid or even better, a jsfiddle.
I have this html code
<div id="b_container">
<div id="b_header">
<div class="header_left">link 1 </div>
<div class="header_left">link 2 </div>
<div class="header_left">link 3 </div>
</div>
<div id="b_content">content goes here</div>
<div id="b_footer">footer goes here</div>
</div>
I used this css code
#b_container
{
margin-right: auto;
margin-left: auto;
background: red;
width:900px;
padding: 10px;
}
#b_header{
background: #FFF;
padding: 5px;
}
.header_left{
float: left;
width:100px;
background: #CCCC00;
}
#b_footer{
background: #FFF;
padding: 5px;
}
#b_content{
background: #00FFFF;
padding: 5px;
height: 100px;
}
but the result shows the three divs (with class header_left) above the b_content. why ?
You have to stop the floating from the divs (with class header_left). You can do it with adding following line to #b_header:
overflow: hidden;
Also see this example.
An alternative is to add an empty div with clear: both; as last one in the div with id b_header. See this example.
but the result shows the three divs (with class header_left) above the
b_content. why ?
This is because you are not clearing the floats, you can do so by using overflow:hidden property or adding a div with clear:both property as the last child of the parent div
container.
Basically, with flaots, you need to clear them, just create a div with this css: clear: both.
That should do the trick.
See more about floats here
I'm looking for a way to create toolbar buttons uisng jquery ui.
I tried to create button using
<div id='menubar_home' style='vertical-align: middle;width: 20px; height: 20px;'>
</div>
and using
$('#menubar_home').button({
icons: { primary: "ui-icon-home" }
});
But image in button is not centered:
How to center image in button ?
#menubar_home {
display:table-cell;
vertical-align: middle;
text-align: center;
}
I assume there isn't transparent sides in the image.
Adds a border to img to work on positioning: border: 1px solid red;
Then check the image has a display: block; property.
Try to add margin: 0 auto; property, which aims to center a block (your image).
You will perhaps need to add !important to force the property: margin: 0 auto !important;
Hoping to help you (not sure, not easy without manipulating the code myself).
Add a padding:8px; to the button/input style to allow the icon to be properly aligned.
You could also place a span within the div like so:
<div id="menu-bar-home">
<span class="ui-icon ui-icon-home"></span>
</div>
reference it in css and change the position:
div#menu-bar-home {
position:relative;
}
div#menu-bar-home > span {
position: absolute;
left: +or-(n)px; /* so just adjust the position
}
also note you may have to adjust the z-index of the span.
best o' luck, bro.
EDIT: you may still achieve the results you want in this manner, but I though you were creating the button with the div.
As the gentleman below suggests, I would set the css for menu bar as such:
div#menu-bar-home
{
display: table-cell;
vertical-align: middle;
text-align:center;
}
I ended up doing the following in CSS:
#menubar_home {
font-size: 0;
width: 23px; top: 5;
height: 23px;
}