I am trying to set a div element on the right top of a web-page which contains a span, a label and a button. I want to bring all the elements in alignment regarding the vertical high (preferably at the middle of the div element). However vertical-align: middle does not work as the elements are cling to the top of the div. They are probably influenced by an external div or Panel (since I use gwt). Should I interfere in the default attributes of the gwt widgets? What other solution can you suggest?
The code:
<div class="{style.topRightDisplay}">
<span style="float:left;">Eingeloggt als: </span>
<g:HTML ui:field="loginHTML" addStyleNames="{style.loginHTML}"></g:HTML>
<g:Button ui:field="logoutButton" addStyleNames="{style.button}">Logout</g:Button>
</div>
.button {
float: right;
margin-right: 15px;
}
.loginHTML {
float: left;
}
.topRightDisplay {
float: right;
height: 20px;
width: 200px;
vertical-align: middle;
}
You misunderstand the purpose of vertical-align. See the explanation of vertical-align on MDN
You need to apply vertical-align to the child elements, not the parent.
Without knowing what your markup looks like, I suggest this:
.topRightDisplay input,
.topRightDisplay button,
.topRightDisplay span{
vertical-align: middle;
display: inline-block;
}
You should also remove the floats. Floats make an item render as a block-level element, which means vertical-align won't work.
Instead you can use display: inline-block. You may need to change the order of the elements in hmtl to get the result you want.
Related
Hi I'm currently trying to float my icon element to the right, while maintaining how its centered vertically next to its sibling element. I know float and display: inline-block can't coexist with each other. I've already tried using direction: rtl and text-align: right for my icon. I also don't want to hardcode by using pixels with margins/paddings, since I want this to be mobile-responsive. Are there any ideas?
Here's what the HTML would look like:
<span class='container'>
<p class='text'>Here is a lot of text and it is meant to overflow.</p>
<icon class='caret'></icon>
</span>
Here's my current CSS:
.text{
width: 340px;
display: inline-block;
vertical-align: middle;
}
.caret{
color: gray;
display: inline-block;
vertical-align: middle;
//float: right; //doesn't work
}
Photo Example of Desired Result:
I'm very confuses about float.
.two should be on the right of .one
but .two just below .one
div {
width: 100px;
background: #FF9;
}
;
.theone {
float: left;
font-size: 20px;
}
<div class="theone">one</div>
<div class="theright">two</div>
into div css add display:inline-block;
div{
display: inline-block;
}
.theright {
float: left;
font-size: 20px;
}
add that in, if you want 2 divs to be next to eachother it is best to have them both float right.
additionally you could replace .theone with .theone,.theright
A div has display: block by default.
You probably want to set another display type to your divs.
div { width: 100px; background: #FF9; display: inline; }
.theone { float: left; font-size: 20px; }
See jsFiddle
I'll try and make a detailled and explained answer. A floating element floats from its initial position in the flow. Basically, the floating effect affects only elements declared after it on the HTML structure.
In your case, the right-floating element is declared after the non-floating one. So it is normal theright appears below theone and you don't see the floating effect.
To make an element float on the right of another, you must declare it before this another. Like this :
<div class="theright">two</div>
<div class="theone">one</div>
<style>
.theright {
float: right;
}
</style>
Note that for this to work, theright element needs to be larger than theone. Otherwise, theone will mask entirely theright pushing its content out of the box. It is so because a floating element gets out of the flow and hovers over the other elements, which contents "avoid" the floating blocks.
There are many other ways to obtain the same result with a different approch :
make theone float on the left instead (leaving theright as a basic block element)
make both elements inline-blocks and give them appropriate widths
for two elements only, it is not necessary, but if you need 3 or more elements side by side, you can make them all float on the left (or on the right declaring them in reverse order, depending on the final layout you want)
etc.
div {
width: 100px;
background: #FF9;
display: inline-block;
}
;
.theone {
float: left;
font-size: 20px;
}
<div class="theone">one</div>
<div class="theright">two</div>
By default div's have display value set to "block" which means they "begin from next line".
If you add display: inline-block property for all divs, then you can add float: left for any div to make it first.
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/
This is my code for the two buttons:
HTML:
<div clas="buttons">
<a class="btn1" href="#">Ture</a>
<a class="btn2" href="#">False</a>
</div>
CSS:
.btn1 {
margin-bottom: 30px;
margin-left: 150px;
}
.btn2 {
margin-right: 150px;
}
However, "the margin-bottom:30px" attribute simply doesn't work. It failed to position the button vertically. Even more weirdly, the "margin-right: 150px;" attribute doesn't work for my btn2, and the two buttons are still adjoin to each other. BTW, my div is large enough to have the two buttons positioned seperately.
Margins should only be applied on block level elements. They will give unexpected results if you apply them on inlines, wich the <a> are by default: You could set padding in stead of margin. And indeed reverse them as #Mitz correctly suggested. The more correct way, but perhaps more difficult for beginners, would be to convert the <a> to block and float them left. Personally my css would look something like this:
.buttons {
padding: 30px 150px;
overflow: hidden; /* for clearfix */
}
.btn1, .btn2 {
display: block;
}
.btn1 {
float: left;
}
.btn2 {
float: right;
}
That is just how I interpret your code and think what you might want to achieve.
This is because naturally <a> is an inline element. You need to apply display: block; to it if you want to apply margins.
The two buttons will be one above the other afterwards. If you still want them to appear next to each other then you should float: left; them. And don't forget to apply some kind of .clearfix.
you should use margin-top and margin-left, instead of margin-bottom and margin-right...
you can use first button's height to push the other button down, like this
.btn1 { height:200px; }
and if you are using margins you should always define some height and width, like
.btn1 { height:20px; width:100px; }
.btn2 { height:20px; width:100px; padding-top:150px; }
update:
about the float comment-
float will get the two buttons sit side by side horizontally,
i think he wanted them aligned vertically
You can try float:left; for buttons.
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.)