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
Related
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>
For most of you this will be a simple question but I'm new to css. My problem is that I have two blocks next to each other with float but text in second object just does not stay in same line. How do I get everything in same line?
What it should look like:
blocks
In reality everything works fine until "Text2" comes or I try to adjust "Logo" padding, then "Text2" moves to next line something like this.
Also how do I get "Text2" next to "Logo"? Right now I only got it working with float:right but I need it closer to the logo. And do I use aside for these elements? Thanks.
Adding js fiddle url for demo: http://www.jsfiddle.net/08rhr7wx/
HTML:
<aside>
<div class="wrapper">
<div class="block1">
<h2>Text1</h2>
</div>
<div class="block2"><img src="img/logo.jpg"></div>
<h2>Text2</h2>
</div>
</aside>
CSS:
.wrapper {
overflow: hidden;
}
.wrapper div {
height: 55px;
margin-top: 20px;
}
.wrapper .block1 {
float: left;
margin-left: 20px;
background: #390b5d;
width: 555px;
}
.wrapper .block1 h2 {
padding-left: 20px;
padding-top: 13px;
}
.wrapper .block2 {
float: left;
width: 325px;
background: #e26c34;
padding-left: 20px;
}
.wrapper .block2 h2 {
float: right;
padding-right: 20px;
}
I moved your "text2" inside the block2 where I guess you want it.
Also, when setting up fixed width like you have, you need to set a min-width on the wrapper to keep those floats in 1 line.
To make the "text2" stay next to your logo, I changed it to display: inline instead of its default display: block.
Note: What you really should try, is to re-structure your code making it more responsive.
.wrapper {
min-width: 1000px;
overflow: hidden;
}
.wrapper div {
height: 55px;
margin-top: 20px;
}
.wrapper .block1 {
float: left;
margin-left: 20px;
background: #390b5d;
width: 555px;
}
.wrapper .block1 h2 {
padding-left: 20px;
}
.wrapper .block2 {
float: left;
width: 325px;
background: #e26c34;
padding-left: 20px;
}
.wrapper .block2 h2 {
display: inline
}
<aside>
<div class="wrapper">
<div class="block1">
<h2>Text1</h2>
</div>
<div class="block2">
<img src="img/logo.jpg">
<h2>Text2</h2>
</div>
</div>
</aside>
As requested, a second sample where some restructure has been made.
.wrapper {
min-width: 1000px;
overflow: hidden;
}
.wrapper div {
height: 55px;
margin-top: 20px;
}
.wrapper .block1 {
float: left;
margin-left: 20px;
background: #390b5d;
width: 555px;
line-height: 55px;
}
.wrapper .block1 span {
font-size: 24px;
padding-left: 20px;
color: white;
}
.wrapper .block2 {
float: left;
width: 325px;
background: #e26c34;
padding-left: 20px;
line-height: 55px;
vertical-align: middle;
}
.wrapper .block2 span {
font-size: 24px;
padding-left: 20px;
vertical-align: middle;
display: inline-block;
}
.wrapper .block2 img {
vertical-align: middle;
display: inline-block;
}
<aside>
<div class="wrapper">
<div class="block1">
<span>Text1</span>
</div>
<div class="block2">
<img src="http://lorempixel.com/30/30/technics/5/"><span>Text2</span>
</div>
</div>
</aside>
Try adding h2 tag inside .block2
<div class="block2"><img src="img/logo.jpg"><h2>Text2</h2></div>
Ref: jsfiddle.net/08rhr7wx/1/
I have this code and the text is properly centered.
HTML
<div class="holder">
<img src="http://placehold.it/100x150/" style="float: left;" />
some text
</div>
CSS
.holder {
border: 1px solid red;
padding: 10px;
width: 300px;
display: table;
}
a {
display: table-cell;
vertical-align: middle;
}
img {
width: 100px;
}
http://jsfiddle.net/2P8Yj/1/
How can I make the text aligned to left, next to the image?
Add a width to your a:
a {
display: table-cell;
vertical-align: middle;
width:200px;
}
DEMO HERE
Try this http://jsfiddle.net/2P8Yj/18/
I have added the display: table to body the css is as follows
body{display:table}
.holder { border: 1px solid red; padding: 10px; width: 300px;display: table-row;}
a { display: table-cell;
vertical-align: middle; }
img { width: 100px;}
Instead of body you can have one more div above it.
Set your anchor to 100% and add some padding if needed:
a {
display: table-cell;
vertical-align: middle;
width: 100%;
padding-left: 15px;
}
Demo: http://jsfiddle.net/2P8Yj/20/
Try this JsFiddle: JsFiddle
This are the changes in your CSS, notice the height I have added to the .holder and the line-height to your a:
.holder {
border: 1px solid red;
padding: 10px;
width: 300px;
height:150px;
display: block;
}
a {
line-height:150px;
padding-left:20px;
}
img {
width: 100px;
}
You could put img and a each in a cell to create a "proper" table:
HTML:
<div class="holder">
<div class="cell">
<img src="http://placehold.it/100x150/" style="float: left;" />
</div>
<div class="cell">
some text
</div>
</div>
CSS:
.holder {
border: 1px solid red;
padding: 10px;
width: 300px;
display: table;
}
.cell {
display:table-cell;
vertical-align: middle;
text-align:left;
}
.cell:nth-child(1) {
width:105px; /*just to show, better to use padding for second cell*/
}
img {
width: 100px;
}
http://jsfiddle.net/2P8Yj/13/
Not sure if changing the display: table-cell; to display: inline-block; is ok in your situation.
But you can accomplish the same effect with this:
a {
display: inline-block;
vertical-align: middle;
}
img {
width: 100px;
display: inline-block;
vertical-align: middle;
}
Demo
You could add position:relative and left:-80px to your text CSS.
EXAMPLE
flaot:left; might solve your problem.
I am trying to layout a page to look like this: http://jsfiddle.net/LLqwX/1/
But I cannot figure out how to get the divs "logo" and "sometext" to be on the same line as the buttons. I would like it all to stay as it is, with the same colors everywhere, just that the top two lines would become friends and want to stay on the same line together.
HTML
<div id="top">
<div id="logo">logo</div>
<div id="sometext">text text</div>
<div id="menu">
btn 1
btn 2
btn 3
</div>
</div>
<div id="content">
<div id="hello">
hello
</div>
</div>
CSS
#top {
background: #ccc;
}
#logo {
display: inline-block;
background: #ff00ff;
}
#sometext {
display: inline-block;
background: #ffff00;
}
#menu {
text-align: center;
}
#content {
background: #444;
}
#hello {
width: 40%;
margin: 0 auto;
background: #888
}
Simply add display: inline-block to the #menu.
http://jsfiddle.net/LLqwX/3/
You could use the same inline-block method you've used elsewhere:
#menu {
display: inline-block;
text-align: center;
}
http://jsfiddle.net/LLqwX/2/
EDIT:
I realize that you probably want the buttons to remain centered.
There are many methods of structuring this, but I tried to minimize changes to your original code.
<div id="headleft">
<div id="logo">logo</div>
<div id="sometext">text text</div>
</div>
div#headleft {
position:absolute;
}
http://jsfiddle.net/LLqwX/4/
Another way to keep the buttons centered is to use a flex layout.
Here is a FIDDLE showing how.
CSS
#top {
background: #ccc;
display: flex;
}
#logo {
display: inline-block;
background: #ff00ff;
}
#sometext {
display: inline-block;
background: #ffff00;
}
#menu {
display: inline-block;
text-align: center;
flex: 1;
}
#content {
background: #444;
}
#hello {
width: 40%;
margin: 0 auto;
background: #888
}
Hi all on my page here: http://www.gamingonlinux.com/sales/ i want to align text in the added, price, savings and provider to the top, how would I go about that?
Here is the html for the columns:
<div class="row">
<div class="left">
{:screenshot} {:info}
</div>
<div class="date-column">
{:date}
</div>
<div class="price-column">
{:price}
</div>
<div class="middle">
{:savings}
</div>
<div class="right">
{:provider}
</div>
</div>
And their css:
.left
{
display: table-cell;
padding: 14px;
}
.price-column
{
display: table-cell;
padding: 14px;
width: 150px;
}
.date-column
{
display: table-cell;
padding: 14px;
width: 150px;
}
.middle
{
display: table-cell;
width: 75px;
padding: 14px;
}
.right
{
display: table-cell;
width: 155px;
padding: 14px;
}
Inside the "left" div the screenshot and name are inside floated left and right spans.
Just like on a regular table cell you can use vertical-align:top; to do the alignment.
You just have to add float: left; to your css (.left class) like this
.left
{
display: table-cell;
padding: 14px;
float: left;
}
Easy fix:
.row > div {
vertical-align: top;
}
If I understand your problem try this code. vertical-align is good choice:
display: table-cell;
padding: 10px;
width: 150px;
text-align: center;
vertical-align: top;
More other options for vertical-align is: