I have a problem with vertically align 3 spans inside a div. It's easy to achieve, but vertical align doesn't work when i use float. I want that lightblue bar to be vertically centered. Code:
.container {
}
.text-1 {
float: left;
padding-right: 10px;
}
.bar {
background-color: lightblue;
border-radius: 5px;
float: left;
height: 5px;
width: 150px;
}
.text-2 {
padding-left: 10px;
}
<div class="container">
<span class="text-1">Text 1</span>
<span class="bar"> </span>
<span class="text-2">Text 2</span>
</div>
Thank you very much for your help.
JSFiddle
You can use display: inline-block; along with vertical-align: middle; on your <span> elements instead of float. This way they are positioned next to each other too and you can apply the vertical alignment:
.container span {
display: inline-block;
vertical-align: middle;
}
.text-1 {
padding-right: 10px;
}
.bar {
background-color: lightblue;
border-radius: 5px;
height: 5px;
width: 150px;
}
.text-2 {
padding-left: 10px;
}
<div class="container">
<span class="text-1">Text 1</span>
<span class="bar"> </span>
<span class="text-2">Text 2</span>
</div>
Related
Any idea how can I position my floated div in the bottom of its parent without using position: absolute, display: flex or <table>?
I'm rendering this page to generate a PDF and this solutions does not work: position: absolute can't handle the responsive size of contents, display: flex and <table> deconfigure on rendering. Only float seems to be accepted to get first and last div on the corners of my page.
.third-adjust {
white-space:nowrap;
}
.third-adjust div {
display: inline-block;
}
.third-adjust div:nth-child(1) {
float: left;
}
.third-adjust div:nth-child(3) {
float: right;
}
.sign img {
max-width: 305px;
max-height: 85px;
}
.text-bold {
font-weight: bold;
}
.sign span {
display: block;
line-height: 16px;
}
.text-centered {
text-align: center;
}
<div class="line">
<div class="third-adjust full text-centered">
<div class="sign">
<img style="margin-bottom: -40px; width: 123px; height: 85px;" src="https://dummyimage.com/123x85/000000/0011ff.png">
<span style="font-size:14px" class="text-sign text-bold">Name</span>
<span style="font-size:12px" class="text-sign">Position</span>
</div>
<div class="sign">
<img style="margin-bottom: -20px; width: 155px; height: 71px;" src="https://dummyimage.com/155x71/000000/0011ff.png">
<span style="font-size:14px" class="text-sign text-bold">Name</span>
<span style="font-size:12px" class="text-sign">Position</span>
</div>
<div class="sign">
<img style="margin-bottom: -10px; width: 201px; height: 58px;" src="https://dummyimage.com/201x58/000000/0011ff.png">
<span style="font-size:14px" class="text-sign text-bold">Name</span>
<span style="font-size:12px" class="text-sign">Position</span>
</div>
</div>
</div>
Thanks!
Please check the problem statement in the plnkr below.
http://plnkr.co/edit/ojt3l3ljNYOA6HDq
.d {
width: 200px;
background: red;
text-align: center;
>div {
display: inline
}
}
.a {
float: left;
}
.c {
float: right;
top: 0;
position: relative
}
.b {
float: none;
margin: 0 auto;
}
<h1>How do we get c to take top-right position!</h1>
<div class="d">
<span class="a">a</span>
<span class="b">basdsadjkasdl ksaalsdk jsald kjsaldkajsdlaks</span>
<span class="c">c </span>
</div>
forget about the float's, use flexbox, and set the d as display: flex
.d {
display: flex;
width: 200px;
background: red;
text-align: center;
}
<div class="d">
<span class="a">a</span>
<span class="b">basdsadjkasdl ksaalsdk jsald kjsaldkajsdlaks</span>
<span class="c">c </span>
</div>
I am trying to align the text vertically equal using css, but there is some sort of space in the right side span.
Have added the code and fiddle link.
p{
clear: both;
margin: 0;
padding: 0;
display: table;
}
span.blue{
background: blue;
}
span.green{
background: green;
}
span.black{
background: black;
}
span.circle{
width: 15px;
height: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
display: inline-block;
margin-right: 12px;
/* float: left; */
vertical-align: top;
}
span.desc{
/* float: left; */
width: 115px;
vertical-align: top;
display: inline-block;
}
<div class="container">
<p>
<span class="blue circle"></span>
<span class="desc">Blue text</span>
</p>
<p>
<span class="green circle"></span>
<span class="desc">Green text</span>
</p>
<p>
<span class="black circle"></span>
<span class="desc">black text</span>
</p>
</div>
Fiddle Link
I think I see the small misalignment you're talking about. Is this better ? I aligned both the cirlce and the text using
vertical-align: middle;
instead of
vertical-align: top;
Edit
As vertical-align: top has to be kept, I instead added a margin-top: 2px to the circles. This places them at the same height as the text and both are still aligned at top.
p{
clear: both;
margin: 0;
padding: 0;
display: table;
}
span.blue{
background: blue;
}
span.green{
background: green;
}
span.black{
background: black;
}
span.circle{
width: 15px;
height: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
display: inline-block;
margin-right: 12px;
/* float: left; */
vertical-align: top;
margin-top: 2px;
}
span.desc{
/* float: left; */
width: 115px;
vertical-align: top;
display: inline-block;
}
<div class="container">
<p>
<span class="blue circle"></span>
<span class="desc">Blue text</span>
</p>
<p>
<span class="green circle"></span>
<span class="desc">Green text</span>
</p>
<p>
<span class="black circle"></span>
<span class="desc">black text</span>
</p>
</div>
Use vertical-align: middle or you can use the same line-height and font-size to solve the issue as in the snippet below.
p span {
font-size: 16px;
line-height: 16px;
}
Explanation:
Keeping the same line-height and font-size will ensure that vertical-align: top will work perfectly fine.
snippet below:
p{
clear: both;
margin: 0;
padding: 0;
display: table;
}
span.blue{
background: blue;
}
span.green{
background: green;
}
span.black{
background: black;
}
span.circle{
width: 15px;
height: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
display: inline-block;
margin-right: 12px;
/* float: left; */
vertical-align: top;
}
span.desc{
/* float: left; */
width: 115px;
vertical-align: top;
display: inline-block;
}
p span {
font-size: 16px;
line-height: 16px;
}
<div class="container">
<p>
<span class="blue circle"></span>
<span class="desc">Blue text</span>
</p>
<p>
<span class="green circle"></span>
<span class="desc">Green text</span>
</p>
<p>
<span class="black circle"></span>
<span class="desc">black text</span>
</p>
</div>
Your issue looks to be that the height of the text is greater then that of the circle. Flexbox could help with this, make the p display flex and set the circles to align center.
p{
clear: both;
margin: 0;
padding: 0;
display: flex;
}
span.blue{
background: blue;
}
span.green{
background: green;
}
span.black{
background: black;
}
span.circle{
align-self:center;
width: 15px;
height: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
display: inline-block;
margin-right: 12px;
/* float: left; */
vertical-align: top;
}
span.desc{
/* float: left; */
width: 115px;
vertical-align: top;
display: inline-block;
}
I am having some issues trying to get text-overflow: ellipsis to work on a span where I don't have a fixed width. The span should expand according to the content, but if the content is larger than the space available, then the content should show ellipsis. Here is a link to JSFiddle.
The CSS and HTML:
.row {
width: 50%;
border: 1px solid black;
}
.wrapper {
text-align: left;
}
.label {
display: inline-block;
margin-top: 10px;
margin-right: 4px;
padding: 0 8px;
border-radius: 4px;
color: white;
background-color: grey;
height: 20px;
vertical-align: middle;
font-size: 14px;
}
.content {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<div class="row">
<div class="wrapper">
<div class="label">
<span class="content">text</span>
</div>
<div class="label">
<span class="content">longer text label</span>
</div>
<div class="label">
<span class="content">Another label</span>
</div>
<div class="label">
<span class="content">A very very very very very very long text label that should fit inside row and cut the text and show ellipsis...</span>
</div>
</div>
</div>
Check this plunker:
https://jsfiddle.net/42khut93/3/
You need to set max-width for both the label and content classes
and adjust the padding in percentage.
Also set the .content display to block or inline-block
.row {
width: 50%;
border: 1px solid black;
}
.wrapper {
text-align: left;
}
.label {
display: inline-block;
margin-top: 10px;
margin-right: 4px;
padding: 0 1%; //in percentage
border-radius: 4px;
color: white;
background-color: grey;
height: 20px;
vertical-align: middle;
font-size: 14px;
max-width: 98%; //max-width 100% - 1% padding + 1% padding
}
.content {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%; // set max-width
}
<div class="row">
<div class="wrapper">
<div class="label">
<span class="content">text</span>
</div>
<div class="label">
<span class="content">longer text label</span>
</div>
<div class="label">
<span class="content">Another label</span>
</div>
<div class="label">
<span class="content">A very very very very very very long text label that should fit inside row and cut the text and show ellipsis...</span>
</div>
</div>
</div>
I am trying to align span elements which are adjacent to a floating element.
Here is the fiddle
.heading {
background-color: tomato;
}
.heading::after {
content: "";
display: block;
clear: both;
}
.heading > * {
display: inline-block;
vertical-align: middle;
color: beige;
padding: 10px;
font-family: Calibri;
}
.button {
float: right;
background-color: firebrick;
font-family: Tahoma;
}
<div class="heading"> <span> some icon here</span>
<!--
--><span>some text here</span>
<div class="button">Go</div>
</div>
I am okay to change the HTML.
Some considerations: (Added after seeing below answers)
Font size and height of the each child elements are different.
If I use display: table-cell, the child elements width are stretching in the parent container. (I need to just align the child elements vertically)
PS: I am not looking for display: flex solution.
I would love to go with the display: table-cell; solution but if it's just one line than you can use line-height here. (Just not to complicate the process using display: table-cell; as there are certain limitations such as you cannot use margin and stuff)
.heading {
background-color: tomato;
line-height: 40px;
}
.button {
float: right;
padding: 0 10px;
background-color: firebrick;
}
Demo (line-height solution)
So basically what am doing is getting rid of your custom padding for the button and using a line-height instead. If you think you can have more than one line, than making both the sections as display: table-cell; will make much more sense.
As you commented a case where you have different font-size which doesn't make much sense to me, so a solution for that is to use display: table-cell; and tweak your markup a bit
Demo 2 (display: table-cell; solution)
<div class="heading">
<div>
<span> some icon here</span>
<span>some text here</span>
</div>
<div>
<div class="button">Go</div>
</div>
</div>
.heading {
background-color: tomato;
line-height: 40px;
}
.heading > div {
display: table-cell;
vertical-align: middle;
}
.heading > div:first-child {
width: 100%;
}
.heading span {
display: inline-block;
vertical-align: top;
}
.heading span:first-child {
font-size: 30px;
}
.button {
padding: 0 10px;
background-color: firebrick;
}
Add this in to your css:
.heading span {
line-height: 34px;
}
I think you try to display: table-cell property
as like this
.heading {
background-color: tomato;
display: table;
width:100%;
}
/* clear fix */
.heading::after {
content:"";
display: block;
clear: both;
}
.heading > * {
display: table-cell;
vertical-align: middle;
color: beige;
}
.button {
float: right;
padding: 10px;
background-color: firebrick;
}
/* my attempt to align */
.heading::before {
content:"";
height: 100%;
width: 0px;
}
<div class="heading"> <span> some icon here</span>
<span>some text here</span>
<div class="button">Go</div>
</div>
Try
position: relative;
top: 50%;
transform: translateY(-50%);
I would suggest using a padding and make sure the height of the button is set.
.heading .mytext {
height: 20px;
float: left;
padding-bottom: 10px;
padding-top: 10px;
}
.button {
float: right;
padding: 10px;
height: 20px;
background-color: firebrick;
}
with html
<div class="heading">
<div class="mytext">
<span> some icon here</span>
<span>some text here</span>
</div>
<div class="button">Go</div>
</div>
See: http://jsfiddle.net/w7vngc43/20/
I modified Mr.Alien's solution of display: table-cell without using line-height. Here is the code:
HTML:
<div class="heading">
<div class="left"> <span class="left-one"> some icon here</span>
<span class="left-two">some text here</span>
</div>
<div class="right">
<button class="button-cancel">Cancel</button>
<button class="button-go">Go</button>
</div>
</div>
CSS
.heading {
background-color: tomato;
}
.heading > div {
display: table-cell;
vertical-align: middle;
}
.left {
width: 100%;
}
.left span {
display: inline-block;
vertical-align: middle;
}
.left-one {
font-size: 30px;
}
button {
padding: 10px 15px;
background-color: firebrick;
border: none;
margin: 0;
}
.right {
white-space: nowrap;
}
Working Fiddle