imagine the star * is centred inside the div
textAlignRight * text AlignLeft
That's basically what I am trying to achieve
<center>
<span class="left_host">Right aligned</span>
*
<span class="right_host">Left aligned</span>
</center>
Any help to get this solved would be awesome
thank you
HTML:
<div class="wrap">
<div class="right">text aligned to the right</div>
<div class="star">★</div>
<div class="left">text aligned to the left</div>
</div>
CSS:
body
{
text-align: center;
}
.wrap
{
display: inline-block;
background: #eee;
}
.wrap > div
{
float: left;
padding: 10px 5px;
}
.right
{
text-align: right;
direction: rtl;
}
.left
{
text-align: left;
}
i've added buttons to the live example to let you see what happen when more content will append dynamically: http://jsfiddle.net/wqsb38jr/1/
This is how I would do it structurally:
div {
display: inline-block;
padding: 10px;
vertical-align: middle;
}
.left {
text-align: right;
}
.center {
text-align: center;
width: 110px;
}
.right {
text-align: left;
}
.left,
.right {
width: 200px;
}
.container {
text-align: center;
min-width: 580px;
}
<div class="container">
<div class="left">This text will be aligned right but appear on the left of stuff that you want to put in the center of all this madness.</div>
<div class="center">* This will be centered. *</div>
<div class="right">This text will be aligned left but appear on the right of stuff that you want to put in the center of all this madness.</div>
</div>
http://jsfiddle.net/zn2uafm3/
Related
How to vertically align center .sub-block-2 element (like .sub-block-1) ?
.sub-block-1 should be display=flex
.sub-block-2 should be display=inline-flex
Behavior should be the same as now except .sub-block-1 and .sub-block-2 should be vertically centered
<div class="wrapper">
<div class='holder'>
Some text
<div class="block">
<div class="sub-block-1"></div>
</div>
<div class="block">
<div class="sub-block-2"></div>
</div>
dsdfsd sdfsdf dsfsdfsdf sdfsdfsdf sdfsdf sdfsdf
</div>
</div>
.wrapper {
width: 300px;
}
.holder {
line-height: 30px;
}
.block {
display: inline-block;
vertical-align: middle;
overflow: hidden;
}
.sub-block-1 {
display: flex;
background: #000;
height: 20px;
width: 60px;
}
.sub-block-2 {
display: inline-flex;
background: #000;
height: 20px;
width: 100px;
}
codepen https://codepen.io/ruvi/pen/yLaryJq
inline elements are a little funky with line height. (thread on how line-height affects inline elements)
Adding line-height: 0; to .block will align both sub-block1 and sub-block2 vertically, although if there's any text inside .block, there will be no extra space between lines.
.block {
display: inline-block;
vertical-align: middle;
overflow: hidden;
line-height: 0;
}
#left {
float: left;
width: 15%;
overflow: hidden;
}
#right {
float: left;
width: 60%;
overflow: hidden;
}
#cen {
display: inline-block;
width: 5%;
overflow: hidden;
}
#container {
width: 100%;
text-align: center;
}
<div id="container">
<h1>
<div align="center" id="cen">+</div>
</h1>
<h1>
<div align="center" class="Area" id="left">1</div>
</h1>
<h1>
<div align="center" class="Phone" id="right">650000</div>
</h1><br>
</div>
The grey area is my container DIV
The Top is what I have
The bottom is what I want.
Nothing I do sligns them correctly, or pushing one div to the next line. Its so frustrating I'm about to smash my computer
Why not simply use span and some margin:
h1 {
text-align: center;
}
span {
margin: 10px;
}
<h1><span>+</span><span>1</span><span>650000000</span></h1>
you can then change individual margin by adding some class
From this JSFiddle, you can see that I have a footer.
I would like to align the content within each column so that the container is centered, but the text still aligned left.
HTML:
<div class="left">
<div class="align">
<h6>Facebook</h6>
<h6>Twitter</h6>
<h6>Blog</h6>
</div>
</div>
<div class="right">
<div class="align">
<h6>Privacy Policy</h6>
<h6>Terms of Service</h6>
<h6>Help</h6>
<h6>Contact Us</h6>
</div>
</div>
CSS:
div {
width: 50%;
}
.left {
float: left;
}
.right {
float: right;
}
.align {
display: table;
margin: 0 auto;
}
Any suggestions? Thanks.
Please check this
.left {
width: 50%;
float: left;
background-color: white;
}
.right {
width: 50%;
float: right;
background-color: black;
color: white;
}
.hor-center {
display: table;
margin: 0 auto;
}
<div class="left">
<div class="hor-center">
<h6>Facebook</h6>
<h6>Reddit</h6>
<h6>Instagram</h6>
</div>
</div>
<div class="right">
<div class="hor-center">
<h6>Terms</h6>
<h6>F&Q</h6>
<h6>Email</h6>
</div>
</div>
You need to set a width on a block level container and give it margin: 0 auto;. You can change the 0, which controls top and bottom margins, but the key is having a definite width with auto left and right margins.
I've searched it at online and found some solution. But, nothing works at my project. At most of the solution, I've found:
<div class="a">
<div class="b">
Unknown stuff to be centered.
</div>
</div>
.a {
display: table;
width: 100%;
}
.b {
display: table-cell;
text-align: center;
vertical-align: middle;
}
By applying this technique, I've tried to build something like this: http://jsfiddle.net/L2GZx/1/
The text of left column only needed to be aligned middle vertically. But, it's not working with that technique:
<div class="row">
<div class="left">
<p>Sample Text</p>
</div>
<div class="right">
<p>Text</p>
<p>Input Element</p>
<p>Table</p>
<p>Image</p>
</div>
</div>
<div class="row">
<div class="left">
<p>Sample Text Sample Text Sample Text Sample Text Sample Text </p>
</div>
<div class="right">
<p>Text</p>
<p>Input Element</p>
<p>Table</p>
<p>Image</p>
</div>
</div>
<div class="row">
<div class="left">
<p>Sample Text</p>
</div>
<div class="right">
<p>Text</p>
<p>Input Element</p>
<p>Table</p>
<p>Image</p>
</div>
</div>
CSS:
.row {
width: 100%;
background: #ccc;
border-bottom: 1px solid #999;
display: table;
}
.left {
float: left;
width: 40%;
padding: 20px;
display: table-cell;
vertical-align: middle;
}
.right {
float: right;
background: #fff;
width: 40%;
padding: 20px;
}
How can I make the text of left-column aligned middle vertically? Note: I can't use any fixed height as content of each row will be different
Remove the floats. Floated elements can not also be displayed as table-cells. See updated Fiddle.
.row {
width: 100%;
background: #ccc;
border-bottom: 1px solid #999;
display: table;
}
.left {
width: 40%;
padding: 20px;
display: table-cell;
vertical-align: middle;
}
.right {
display: table-cell;
background: #fff;
width: 40%;
padding: 20px;
}
.left {
width: 40%;
padding: 20px;
display: table-cell;
vertical-align: middle;
}
removing" float:left " from .left style solves that issue, but using table and div together is not that good.Working Example
An alternative that I prefer in a situation like this is:
To not use display: table-cell, but rather use display:
inline-block.
To then use vertical-align: middle on the element.
Sample (revised) markup / css:
<div class="row">
<div class="left">
<p>Sample Text</p>
</div>
<div class="right">
<p>Text</p>
<p>Input Element</p>
<p>Table</p>
<p>Image</p>
</div>
</div>
CSS:
.row {
width: 100%;
background: #ccc;
border-bottom: 1px solid #999;
}
.row > div {
display: inline-block;
/* below 2 lines are IE7 hack to make inline-block work */
zoom: 1;
*display: inline;
/* below is consolidated css for both left / right divs */
width: 40%;
padding: 20px;
}
.left {
vertical-align: middle; /* or top or bottom */
}
.right {
background: #fff;
vertical-align: top; /* or middle or bottom */
}
All you have to do is to add a line-height to the left column and it will be automatically aligned (without vertical-align so you can remove it).
Here it is:
.left {
float: left;
width: 40%;
padding: 20px;
display: table-cell;
line-height:150px;
}
And here is your updated FIDDLE
Using your first example, try something like this. I'll explain how it works in the CSS.
<div class="a">
<div class="b">
Unknown stuff to be centered.
</div>
</div>
.a {
width: 100%;
position: relative; /* We want our parent div to be the basis of our absolute positioned child div */
/* You can set your height here to whatever you want */
}
.b {
position: absolute;
width: 100%; /* Set to be the full width, so that our text is aligned centered */
text-align: center;
top: 50%; /* Positions the top of the div at 50% of the parent height */
left: 0; /* Assures that the child div will be left-most aligned */
margin-top: -.5em; /* Moves the top of our div up by half of the set font size */
height: 1em; /* Sets our height to the height of the desired font */
}
Here is the JSFiddle link to see a live example: http://jsfiddle.net/L2GZx/20/
This is one of the best solutions to absolutely center text inside of a webpage. It does have it's limitations however seeing how it won't react to other elements inside the same parent and it also has to have a set height. So multiline text will have it's shortcomings with this method.
I hope this helps!
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: