I am trying to vertically align a SPAN element in the middle of a parent element.
This is what I am doing:
I am trying to get both the username and password labels to be vertically aligned (middle) with the input boxes.
This is my HTML code:
<div class="login_field_wrap">
<span>Username</span>
<input type="text" autocomplete="off" spellcheck="off" id="username" name="username">
<div class="clear"></div>
</div>
This is what I have tried:
.clear { clear:both; }
.login_field_wrap span {
float:left; vertical-align:middle; font-size:13px; color:#333; font-weight:bold; }
.login_field_wrap input {
float:right; vertical-align:middle; padding:8px 5px; border:solid 1px #AAA;
margin:0px; width:250px; }
Vertically aligning an image element inside of this wrapping DIV works absolutely fine, well in Chrome anyway, it just won't align with my SPAN!
Any help would be amazing.
Vertical aligning via CSS can be tricky, and while CSS3 brings about a slew of goodies to help with that, CSS3 support is lackluster in the current browser market.
To achieve this effect I set the line-height property of the child element equal to the height of its containing element.
For example, I would use the following CSS:
.login_field_wrap { height:30px; /* or whatever is appropriate for your design */
.login_field_wrap span { height:30px; line-height:30px; }
.login_field_wrap input { height:30px; line-height:30px; }
The only downside of using line-height to vertically align something is if the text overflows onto a second line, in which case your design will essentially break.
Just remove the float property from your span class and set it to display:inline-block and the vertical-align:middle property will work, like so:
.login_field_wrap span {
color: #333333;
display: inline-block;
font-size: 13px;
font-weight: bold;
text-align: left;
vertical-align: middle;
}
Edit: cleaned up your code a bit, here is a demo that should work across browsers.
http://jsfiddle.net/kUe3Y/
I found the easiest way to do this is to set the parent container display property to table and the child display property to table-cell
#parent{
display:table;
}
#child{
display:table-cell;
vertical-align:middle;
}
I was able to get this to vertically align an anchor element inside a div.
I put it into the terms of your question in this jsFiddle.
I have never been able to get vertical-align to work in anything other than <td>s.
A workaround I commonly use would be to define a height for .login_field_wrap, then set the line-height property in your <span> to be equal to .login_field_wrap's height.
I think text-align:center; should work on elements too. If I am not mistaken, that usually works even if not on text.
Related
I've got two images that I want to sit beside each other inside the parent div but I can't get them to do it.
.column {width:100%;max-width:1500px; margin:0 auto; }
.span_1_of_2 {width:50%; display:inline-block; }
.span_2_of_2 {width:50%;display:inline-block; }
https://jsfiddle.net/87xzwj5t/
It's white-space that's doing you in.
Add this CSS:
.column { font-size: 0; }
.column > div { font-size: 1rem; /* Or whatever you want it to be */ }
and it'll fix your problem.
The font-size: 0 makes sure the white-space isn't rendered, and then the font-size: 1rem resets the font in the child divs to whatever it was set at document root (this is by default 16px in most browsers).
Inline-block elements display just like elements in text flow, which is why the white-space is respected when they're rendered.
JSFiddle example
Remove the whitespace in html, i will work
.column {width:100%;max-width:1500px; margin:0 auto; }
.span_1_of_2 {width:50%; display:inline-block; }
.span_2_of_2 {width:50%;display:inline-block; }
<div class="column">
<div class="span_1_of_2">Div 1</div><div class="span_2_of_2">Div 2</div>
</div>
The problem is that display:inline-block adds about 4pxof margin to the div with it because of the whitespace. If you still want to use it, you could do something like this:
.span_2_of_2 {width:50%; display:inline-block; margin-left:-4px; }
EDIT
What Josh said may be true. Why don't you just float them? Like this:
.span_1_of_2 {width:50%;float:left; }
.span_2_of_2 {width:50%;float:left; }
Then of course clear the float.
Just add float:left; to the first span
CSS
.span_1_of_2 {
width:50%;
display:inline-block;
float:left;
}
Here's the deal: a series of inline-block elements formatted like you
normally format HTML will have spaces in between them. That´s why with two span and the gap between them you will have more than 100%.
DEMO HERE
I've been having a problem with these boxes. The thing is that I need to make the text align always in the middle of the box + image no matter how many lines it has.
Have a look at the example bellow, many thanks:
HTML (I'm using 960 grid)
<div class="grid_4 prod-box-small alpha">
<h5>Shampoos</h5>
<div class="prod-img-box-small"><img src="images/product_small_1.jpg" alt="" /></div>
</div>
CSS
.prod-box-small {
border:1px solid #e4e4e4;
min-height:115px;
padding-right:12px;
padding-left:20px;
margin-bottom:20px
}
.prod-box-small h5 {
color:#820c8e;
float:left;
font-weight:600;
max-width:100px;
padding-top:42px;
padding-bottom:22px
}
.prod-img-box-small {
width:100%;
display: block;
padding:0;
max-height:105px;
margin-right: 0;
text-align: right;
line-height: 115px;
}
.prod-img-box-small img {
max-width:100%;
max-height:100%;
vertical-align: middle
}
Format the h5 using display:inline-block, so vertical-align can work on it, and give it a width - like this: http://jsfiddle.net/Cds5q/
(h5 and img elements are written without any whitespace between the tags here, otherwise you will get the width of a space character between them, and then they won’t fit into the div element exactly.)
stripped down to the important parts of the code: http://jsfiddle.net/aETC4/
you can use display: table for this. With vertical-align: middle your headline will be arranged centered inside the imaginary cell
simplest way us use margin-left: and margin right in percentage. you can check percentage value by debugger tool.
I want to achieve the following effect in CSS:
I use CSS table-cell with :before and :after pseudo-elements so that they auto-adjust their width in one row. In other words, I want the text container have the width of the text (with some padding) and the pseudo-elements fill the rest of the area. This means that I can't use 1px background-image positioned top, because each word has a different width.
Here's the fiddle.
HTML
<div id="container">
<div id="box">
<h2 id="header">UPDATES</h2>
</div>
</div>
CSS
#container {
background:url("http://lorempixel.com/output/abstract-q-g-640-480-9.jpg") center center no-repeat;
padding-top:50px;
height:400px;
width:50%;
margin:0 auto;
}
#box {
margin:0 auto;
width:50%;
display:table;
}
#header {
color:#fff;
font:14px Arial;
font-weight:500;
line-height:10px;
height:10px;
display:table-cell;
padding:0 10px;
width:auto;
text-align:center;
}
#box:after, #box:before {
content:"";
display:table-cell;
border:1px solid #fff;
border-bottom:0;
height:10px;
width:50%;
}
#box:after{
border-left:0;
}
#box:before{
border-right:0;
}
However, it doesn't work in Opera so, I need to find a different technique to achieve the same effect. I'd prefer to avoid using HTML tables and any js. Can you provide any suggestion?
In this example I got rid of the psuedo-elements and sandwiched the header tag between two that were styled as a table to get the line effect. Although this is done using a CSS table the similar concept should be applicable to an html table.
<div id="before" ></div>
<h2 id="header">UPDATES</h2>
<div id="after"></div>
styled like so....
#before {
content:"";
display:table-cell;
border:1px solid #fff;
border-bottom:0;
border-right:0;
height:10px;
width:50%;
}
#after {
content:"";
display:table-cell;
border:1px solid #fff;
border-bottom:0;
border-left:0;
height:10px;
width:50%;
}
http://jsfiddle.net/SteveRobertson/9SBXn/12/
After several tests, I found out that Opera needs a more detailed implementation when using CSS tables with pseudo-elements. In other words, it's not enough to set the parent container as display:table and children as display:table-cell.
You need to set the whole hierarchy, meaning that:
The parent needs to be set as:
display:table
The first children needs to be set as:
display:table-row
And finally set the other children as:
display:table-cell
If you set your CSS ignoring display:table-row like I did, Opera sets the children elements (after display:table-cell) as table-row and not as table-cell, thus the width of each child extends to 100% of the parent and behaves like a row. Setting the table hierarchy like in HTML tables (table > row > cell) you get the expected format.
This seems to affect only Opera, since all other browsers do not try to fix the hierarchy of the CSS table.
Here's the demo (check in Opera as well)
Instead of CSS tables, you could use inline-blocks with percentage width and max-width so that the containers don't fall in a new line.
you probably see this question a lot. However, I've been through threads and I can't seem to find a solution to my situation. It's probably something very minute that I'm missing, or perhaps I'm just barking up the wrong tree all together.
Basically what I'm trying to do is take an anchor with a {display:block;} with a set height and width and have its text be vertically and horizontally centered.
Right now this is my css
.logo
{
width:140px;
height:75px;
border-right:1px dotted black;
border-bottom:1px dotted black;
float:left;
text-align:center;
font-size:15px;
font-weight:bold;
color:#c60606;
}
.logo a
{
display:block;
width:140px;
height:75px;
background-color:#fff;
font-size:15px;
font-weight:bold;
color:#c60606;
}
/*the reason for the double declaration of text information is because
some of the logo divs do not have anchors in them, and it's for uniformity
purposes.
*/
.logo a div
{
margin-top:10px;
}
and then the html would be
<div class="logo"><div>my link</div></div>
Now the reason i stuck a div inside of the anchor is because I thought it would be a good way to separate the text from the actual block, but with that margin setting it moves the anchor down instead of just the text. The vertical-align attribute does basically nothing, and I'm at a loss in terms of what to do. Any suggestions or restructuring ideas would be great. Thank you.
a sample can be found at http://www.dsi-usa.com/test/clientele.php feel free to browse the site it's still a work in progress a lot has to be organized and re-coded. Anyhow, that sample is exactly what I want, just need the text to be vertically aligned as well.
If you set your line-height of the containing box (your anchor -- just ditch the inner div, you don't need it) equal to its height, then a single line of text will be vertically centered. If you require line-wrapping, it gets more complicated.
Here's a fiddle with just one anchor element to demonstrate the simpler scenario: http://jsfiddle.net/vdkAb/1/
UPDATE
...and if you don't need to worry about IE6/7 support (lucky you!), then you can use display:table-cell, and it works effortlessly -- without specifying line-height -- even with multiple lines, like this: http://jsfiddle.net/PH5Yw/
You can't have a <div> inside an <a>, it's invalid HTML. Use a <span> set to display: block; instead.
Update:
As of HTML5, you can now have a div inside an anchor (or any block level element.)
For this to be legal though, you must use the HTML5 doctype:
<!DOCTYPE html>
This usually works for me
$(function(){
$("button").click(function(){
$(".navbar").toggleClass("large");
});
});
*{
box-sizing: border-box;
}
.navbar{
display: flex;
color: white;
background: black;
height: 30px;
margin-bottom: 10px;
transition: all 0.25s ease;
}
.navbar.large{
height: 120px;
}
a{
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
margin-right: 20px;
padding: 0 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
<a>TITLE</a>
<a>Contact</a>
<a>About Us</a>
</div>
<button>Change Nav Size</button>
Just thought I should put this out there :)
Works only when the link container is display: flex
I have a simple CSS help popup that's been working well for me in most simple layouts. But now it needs to work inside a scrolling div.
Given the example HTML:
<div style="overflow:scroll; width:80px">
<a href="#" class="tooltip">
an image
<span>some hidden tooltip which is a bit longer in here</span>
</a>
</div>
(Note: in the real world there will be multiple things with tooltips inside the scrolling div)
I have the CSS:
a.tooltip span
{
display:none;
position:absolute;
padding:0px 0px 2px 2px;
background:yellow;
text-decoration:none;
vertical-align:top;
}
a.tooltip:hover span
{
display:inline;
position:absolute;
padding:0px 0px 2px 2px;
top:0;
left:18px;
background:yellow;
text-decoration:none;
vertical-align:top;
z-index:5;
}
a.tooltip
{
border-width:0px;
text-decoration:none;
}
a.tooltip:hover
{
border-width:0px;
text-decoration:none;
position:relative;
}
Is it possible to have the popup pop out of the scrolling div so it's readable without causing the div to scroll?
Is this achievable in CSS alone, without using javascript?
edit: Live Example kindly provided by Kyle Sevenoaks.
You can set the :hover on the entire DIV. and place your span directly in the div. (This solution does not work in IE6 for example).
see a working example here: http://jsfiddle.net/5mASU/1/
Or you could set i higher z-index to the tooltip and use position fixed, it works:
http://jsfiddle.net/5mASU/3/
also avoid resetting the same values in the hover here is a cleaned up version:
http://jsfiddle.net/5mASU/4/
if for example you set
a {
padding: 5px;
}
a:hover {
// no need to reset the padding here
}
you don't need to reset the padding in the :hover the hover heritages the padding form the style set for the a. Just reset values you want to change between the normal and the hover status.
I don't think it's possible, because z-indexes work from the parent, the child element won't be able to display the span over the top. This CSS tooltip just adds another element when the <a> is hovered. I think you might have to go the jQuery route.
Also, try to post live examples of your problem instead of a long list of HTML and CSS, it's easier for us to help you :)