Basically, I have two span elements: one pulled left, the second pulled right.
The one on the left is bigger, the one on the right is supposed to just show a number.
What I am trying to achieve is - while resizing the window, make the left span line break when it meets the right span and center the right span vertically when it happens (since the container div will probably gain some additional height). Any ideas?
Here is the code: http://www.jsfiddle.net/1db4trxo/5/
.pricing {
width: 100%;
background: #333;
color: #fff;
overflow: hidden;
}
.left {
float: left;
margin-left: 5px;
}
.right {
float: right;
margin-right: 5px;
color: #f6c42b;
}
<div class="pricing">
<span class="left"> Wow, there's kinda lot of text here </span>
<span class="right"> Just a price </span>
</div>
Flexbox can do this, and you don't need floats. In fact, floats are ignored in a flex container.
Revised Fiddle
.pricing {
display: flex; /* establish flex container */
justify-content: space-between; /* align children at opposite ends */
background: #333;
color: #fff;
}
.left {
margin-left: 5px;
}
.right {
white-space: nowrap; /* prevent text from wrapping */
align-self: center; /* center element vertically */
margin-right: 5px;
color: #f6c42b;
}
<div class="pricing">
<span class="left"> Wow, there's kinda lot of text here </span>
<span class="right"> Just a price </span>
</div>
You can do it with CSS table with browser support of IE8+.
Set the container as display: table; two columns inside as display: table-cell; vertical-align: middle; and text-align: right; white-space: nowrap; on the right column.
Open the jsFiddle, resize the result panel and see.
.pricing {
display: table;
width: 100%;
background: #333;
color: #fff;
}
.left, .right {
display: table-cell;
vertical-align: middle;
padding: 0 5px;
}
.right {
color: #f6c42b;
text-align: right;
white-space: nowrap;
}
<div class="pricing">
<span class="left"> Wow, there's kinda lot of text here </span>
<span class="right"> Just a price </span>
</div>
You should set a width of both inner divs
like this
.left
{
width: 75%;
}
.right
{
width: 25%;
}
it's work for me.
Related
I am trying to align 3 divs side by side in a navigation bar. I've spent the past 5 hours trying to figure this out and I know it's something super simple that I can't just wrap my head around.
This is where I am at right now.
If I float the align-right div the tags Join & Support stack ontop of each other.
<div id="sticky-nav">
<div class="container">
<div class="box">
<div class="align-left">
Home Listings
</div>
<div class="align-center">
<form action="/action_page.php">
<input type="text" placeholder="Search..">
<button type="submit">
<i class="fa fa-search"></i>
</button>
</form>
</div>
<div class="align-right">
Join Support
</div>
</div>
</div>
</div>
#sticky-nav {
overflow: hidden;
background-color: #7889D6;
position: fixed;
top: 0;
width: 100%;
}
#sticky-nav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
#sticky-nav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
max-width: 300px;
width: 100%;
}
#sticky-nav button {
padding: 6px 10px;
padding-top: 1px; margin-top : 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
margin-top: 8px;
}
#sticky-nav a:hover {
background-color: #ddd;
color: black;
}
#sticky-nav a.active {
background-color: #4CAF50;
color: white;
}
.container {
display: table;
width: 100%;
}
.box {
display: table-row;
}
.align-left {
width: 33%;
text-align: justify;
display: table-cell;
padding: 10px;
}
.align-center {
width: 33%;
text-align: justify;
display: table-cell;
padding: 10px;
}
.align-right {
width: 33%;
display: table-cell;
padding: 10px;
text-align: right;
}
EDIT: This is the layout I am trying to achieve,
I see that you're using display: table to achieve this effect. I highly recommend reading up more first before continuing with your work or project. Some layout concepts you have to know are grid and flex. In your case, we can use the flexbox concept to solve your problem.
flex basically is a method that can distribute space between items more easily. In your case, you can get what you're trying to achieve by using flex-grow and flex-basis. flex-basis defines how, initially, long/tall an item inside a flex container should be. flex-grow defines how an item inside a flex container can expand (grow) in width/height depending on the remaining space of the container.
In your case, we can simply set the flex container's width (your wrapping div) to 100%. To distribute space evenly between the items, we can set all the items' initial widths to 0. Then, distribute the remaining space of the container (which is still 100%) evenly using flex-grow to 1 for each flexbox item. However, this will make all the items similar in width. To make the center div wider, you can set the flex-grow to 2. This will make it so that the left div, center div, and right div have 25%, 50%, and 25% of the container's remaining space in width respectively. I really recommend reading further about flex to understand what I mean. After reading about flex in the above link, try visiting this and this to learn more about flex-basis and flex-grow.
Here's a working solution using flex. Again, I recommend reading more about flex so that you can use flex better.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Helvetica;
}
body,
html {
width: 100%;
height: 100%;
}
#wrapper {
display: flex;
width: 100%;
}
#wrapper * {
padding: 30px;
text-align: center;
color: white;
}
.left-align,
.right-align {
flex-basis: 0;
flex-grow: 1;
}
.center-align {
flex-basis: 0;
flex-grow: 2;
}
.left-align {
background: #121212;
}
.center-align {
background: #232323;
}
.right-align {
background: #454545;
}
<div id="wrapper">
<div class="left-align">Some content</div>
<div class="center-align">Some content</div>
<div class="right-align">Some content</div>
</div>
I have created a simple example for your layout.
You can achieve it using flex box i.e
.box{
display: flex;
width:100%;
justify-content:space-between;
}
Here is the link: https://codesandbox.io/s/optimistic-euclid-xmv6h
Hope it answer your question.
I'm trying to center align a div that is located within another div. I want to vertically center the "options" div that is located inside the "plan-container"
Thanks in advance.
.plan-container {
width: 960px;
height: auto;
margin-top: 62px;
overflow: hidden;
background-color: red;
}
.options {
float: left;
width: 151px;
height: 100px;
background-color: green;
}
.plan {
float: left;
width: 220px;
height: 600px;
margin-left: 23px;
background-color: purple;
}
.plan:last-child {
float: right;
}
.plan-featured{
width: 300px;
height: 600px;
background-color: purple;
}
<div class="plan-container">
<div class="options">Options</div>
<div class="plan">Box one</div>
<div class="plan plan-featured">Box two</div>
<div class="plan">Box three</div>
</div>
Vucko's answer is correct. I wanted to add a comment, but since I don't have enough reputation yet, I'll just post it as an answer.
You can use the vertical-align property on the inner div that needs centering. This property only works on elements that have display:inline-block or display:table. Refer to the actual spec here.
Repeating Vucko's answer:
.options {
display: inline-block;
vertical-align: middle;
}
You can use inline-block instead of float, and than you can use the vertical-align property:
.plan-container>div{
display: inline-block;
vertical-align: middle;
}
JSFiddle
However, beware of the whitespace issue.
Try it-
.plan-container {
display: flex;
flex-wrap: wrap; /* optional. only if you want the items to wrap */
justify-content: center; /* for horizontal alignment */
align-items: center; /* for vertical alignment */
}
In this style of using line-height and inline-block, why is the green item a few pixels below the middle? Shouldn't there be exactly 15px above and below?
.container{
height: 45px;
line-height: 45px;
background-color: red;
display: inline-block
}
.item{
height: 15px;
width: 15px;
background-color: green;
vertical-align: middle;
display: inline-block
}
<div class="container">
<div class="item">
</div>
</div>
I know there are other ways of vertically aligning items (including JS, absolute positions, and many more). I'm not trying to solve the general "how to vertically align a div".
The culprit here is not so much the line-height, but rather the vertical-align: middle. It tries to align your box with the text that may hypothetically be inside the parent box. Where the inner box ends up depends on the font-size of that text. You can push the box further down by increasing the font-size of its parent:
.container{
height: 45px;
width: 100%;
line-height: 45px;
font-size: 45px;
background-color: red;
display: inline-block
}
.item{
height: 15px;
width: 40px;
background-color: green;
vertical-align: middle;
display: inline-block;
}
<div class="container">
job
<div class="item">
</div>
</div>
As you can see, the text is closer to the bottom of its container than to the top (the "j" overflows the container while the "b" does not).
In the same way, you can move the box closer to the center by decreasing the font-size. Since you asked in comments, here's how you get it optimally centered with this method: Set font-size to 0 on the container.
.container{
height: 45px;
width: 100%;
line-height: 45px;
font-size: 0px;
background-color: red;
display: inline-block
}
.item{
height: 15px;
width: 40px;
background-color: green;
vertical-align: middle;
display: inline-block;
}
<div class="container">
job
<div class="item">
</div>
</div>
Changes in your style may help you
.container {
background-color: #ff0000;
display: table-cell;
height: 45px;
vertical-align: middle;
}
.item {
background-color: #008000;
display: table-cell;
height: 15px;
vertical-align: middle;
width: 15px;
}
Please use dividable size to make this work. Also remove vertical align attribue
https://jsfiddle.net/guc6uxc7/
.container{
height: 42px;
line-height: 42px;
background-color: red;
display: inline-block
}
.item{
height: 12px;
width: 12px;
background-color: green;
display: inline-block;
}
I'm trying to put two spans in a div, one on each side, and both aligned to the bottom of the div, without using absolute positioning (since that ignores padding, etc and I always feel bad after resorting to it). The text in the right span is taller than in the left span. If I use vertical-align to position them, it doesn't take affect if they are both floated, however without them both being floated, they will not be horiziontally aligned properly. I don't have any guarantees on which of the two spans will have more text in it.
http://jsfiddle.net/gsvfn07f/
<div class="outer">
<div class="inner">
<span class="left">left</span>
<span class="right">right</span>
<div class="clearfix"></div>
</div>
</div>
.outer {
width: 40%;
height: 200px;
border: 1px solid red;
}
.inner {
border: 1px solid green;
padding: 5px;
}
.left {
float: left;
display: inline-block;
vertical-align: baseline;
}
.right {
float: right;
font-size: 2em;
}
.clearfix {
clear: both;
}
You can use line-height to get margin from top for your text.
This code seems to do what you want:
.outer {
width: 40%;
height: 200px;
border: 1px solid red;
}
.inner {
height: 35px;
width: 100%;
border: 1px solid green;
}
.left {
line-height: 48px;
float: left;
width: 50%;
}
.right {
display: block;
float: right;
width: 50%;
text-align: right;
font-size: 2em;
}
<div class="outer">
<div class="inner">
<span class="left">left</span>
<span class="right">right</span>
</div>
</div>
This is driving me crazy I just don't understand why this piece of simple css to vertically center an element in a div doesn't work as expected.
this is the html:
<div class="header-a-wrapper" style="
line-height: 48px;
height: 48px;
background: red;
display: block;
text-align: center;
">
<a href="/user/5659186348163072" class="right" style="
background: blue;
line-height: normal;
display: inline-block;
vertical-align: middle;
float: none;
height: 20px;
">medical salamander</a>
</div>
the inner element does not get centered vertically but I really think it should
here is an html with the two elements:
http://alephz.com/test.html
and this is the CRAZY part. here is a jsfiddle with the same html and over there it works! tested on the same chrome/win7!
http://jsfiddle.net/pkrsdqkb/
Very weird, but if you want to solve it, you add to 'a':
position: relative;
top: 50%;
transform: translateY(-50%);
Remove
vertical-align: middle;
float: none;
One option to play nicely with vertical-align: middle is to use display: table and display: table-cell.
The wrapper gets display: table and width: 100%
Wrap the links in a div which will act as a "table cell" with display: table-cell
vertical-align: middle will now work as you expect it to.
Compatibility: display: table is good for IE 8 + and modern browsers everywhere.
Example:
.header-a-wrapper {
background: red;
display: table;
text-align: center;
height: 100px;
width: 100%;
}
.vertical {
display: table-cell;
vertical-align: middle;
}
.right {
background: blue;
display: block;
margin: 2px 0;
}
<div class="header-a-wrapper">
<div class="vertical">
medical salamander
medical salamander
</div>
</div>
Old answer
There is a lot of redundant CSS.
The vertical center is applied through: line-height: 48px.
Leave that on the wrapper and remove all the positioning CSS properties on a.right.
Example:
.header-a-wrapper {
line-height: 48px;
background: red;
display: block;
text-align: center;
}
.right {
background: blue;
}
<div class="header-a-wrapper">
medical salamander
</div>