Here's a code snippet: http://dabblet.com/gist/8673746
I want to position .sign at the middle between the right edge .op1 and the left edge of .op2 without using JavaScript.
Also, the plus signs need to be aligned.
An option is to set text-align:left on .op1, but I'd rather have it be right aligned.
Is it possible using CSS only?
Maybe using position:absolute too:
.sign
{
position:absolute;
left:50%;
padding:10px;
}
Check this http://dabblet.com/gist/8674039
Another thing you can use to complete this is set just padding top-bottom like this
http://dabblet.com/gist/8674139
like this?
.container > * {
display: inline-block;
text-align: center;
vertical-align: middle;
width: 100px;
}
Related
Im having problem vertically aligning a text with CSS. I have tried probably everything but it just doesnt want to work. You can see my demo jsfiddle demo here:
http://jsfiddle.net/zcU7M/7/
.section {
text-align: center;
vertical-align: middle;
display:table-cell;
}
With this code it should work but something is wrong.
How can I fix this? Thanks in advance.
EDIT: Updated demo: http://jsfiddle.net/zcU7M/7/
Write:
.section {
display: table-cell;
vertical-align:middle;
}
Updated Fiddle.
The .section needs the display: table-cell
.section {
height: 200px;
background:#ccc;
border-bottom: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
display:table-cell;
}
The display:table-cell is what allows an element to have children vertically aligned, so it has to be on the parent to be able to have the children aligned vertically.
Here's a Working Demo.
For a vertical paragraph align use that:
p {
height:200px;
line-height:200px;
text-align:center;
vertical-align: middle;
}
JSFiddle example: Exemple
The problem is, that the <p>-Tag just adds some margin at the bottom. You can see this, when inspecting with firebug. Simply add a margin: 0 to your .section p selector:
.section p {
font-size: 15px;
font-family: Arial;
font-style: italic;
margin: 0;
}
http://jsfiddle.net/zcU7M/22/
all credit goes to this link owner #Sebastian Ekström Link, please go through this.
see it in action codepen,
by reading above article I crated a demo fiddle also.
With just 3 lines of CSS (excluding vendor prefixes) we can with the help of transform: translateY vertically center whatever we want, even if we don’t know its height.
The CSS property transform is usally used for rotating and scaling elements, but with its translateY function we can now vertically align elements. Usually this must be done with absolute positioning or setting line-heights, but these require you to either know the height of the element or only works on single-line text etc.
So, to do this we write:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
That’s all you need. It is a similar technique to the absolute-position method, but with the upside that we don’t have to set any height on the element or position-property on the parent. It works straight out of the box, even in IE9!
To make it even more simple, we can write it as a mixin with its vendor prefixes:
Is there a way, by default, to right-align a child div that is position: absolute just using CSS. I know I can make it align to right using JavaScript.
Use right: 0px as shown in this jsFiddle http://jsfiddle.net/DayE3/
I think it should work for you -
parent-div-css { overflow: hidden; }
child-div-css { clear:right; float:right; }
So using PHP I am displaying a page of images. I have a div tag for containing these pictures.
What Im trying to do, is alternate positioning these images on the left and right side of the browser.
So entry 1 is positioned on the left
scrolling down
entry 2 is positioned on the right
etc.
If my div container is style="position:relative;width=100%"
How do I make my images alternate hugging the left and side of the browser?
There are several possible ways, one would be the following:
CSS:
div img{
float:left;
clear:both;
}
div img:nth-of-type(2n){
float:right;
}
Check the Example
If you dont want them alternate that way, use
div img{
float:left;
clear:left;
}
div img:nth-of-type(2n){
float:right;
clear:right;
}
Depending on the browsers you have to support (Internet Explorer 8 and lower don't support that selector), use a class on all even images and replace :nth-of-type(2n) with that class.
for the left-huggers:
style="float:left;clear:left;"
and for the right-huggers
style="float:right;clear:right;"
...though if your container is not wide enough to fit more than 2 images across, you won't need the "clear" declarations.
Set float: left; when index%2 == 0 and float: right; when index%2==1
index being an index variable of a loop iterating over your images.
In a similar vein to the other answers
div img:nth-child(even) { float: right; clear: right; }
div img:nth-child(odd) { float: left; clear: left; }
Demo: http://jsfiddle.net/GL667/
I'm trying to build the liquid layout shown below in CSS.
The left column should stretch to all available space, and if it's possible, on same line.The column on right should became with the same width.
I have already achieved a result very close to what I want. Take a look at http://jsfiddle.net/tcWCC/34/embedded/result/
But there are two problems. The height of both aligned DIVs should be equal. The first or second DIV should grow to be the same height as the other.
The second question is that when the width is not sufficient for 2 DIVs, I want the first (NomeEvento) div to be on top. and not the second div (DataEvento).
I am not sure I understood your question correctly. Is the following layout something similar to what you want? http://jsfiddle.net/5sjgf/
Here's more CSS to try out. If you wanted a margin on that left side. I added background colors to help differentiate.
div.NomeEvento {
text-align: left;
float: left;
width: 75%;
background-color: #eee;
}
div.DataEvento {
text-align: left;
margin-left: 5%;
width: 20%;
float:left;
background-color: #ccc;
}
It seems like a lot of extraneous CSS to me. But maybe the other stuff is in there for a reason. This works fine as the sum-total of your CSS though:
div.Evento {
overflow: hidden;
margin-top: 10px;
}
div.NomeEvento {
background: #eee;
padding-right: 20%; /* the same as the right column width */
}
div.DataEvento {
float:right;
background: #ddd;
}
...BUT, if you're right-floating an element, place it first in the layout - here it's element class DataEvento:
<div class="Evento">
<div class="DataEvento">#evento.Data</div>
<div class="NomeEvento">#evento.Nome</div>
</div>
Check it: http://jsfiddle.net/J89Hp/
Cheers
I acomplished what I want using display table, table row and table cell in my divs.
Take a look. It's exactily what I want.
http://jsfiddle.net/tcWCC/47/embedded/result/
This should be incredibly trivial, but it's not. I have a predefined height for an anchor, and I would like to place the text at the bottom.
<li><a class="my-text">My Text</a></li>
I used the following CSS, which does not work. The text still appears at the top.
a.my-text {
background-color:#cccc;
height:50px;
vertical-align:bottom;
width:100px;
}
The idea is: I want to align text to the bottom, but if there is text that is longer than one line, I want the over flow to go to the top, not push everything else down... any ideas of how this could be achieved?
This can't be done using css and the html you provide. If you put an extra span in the anchor, it can be done:
a.my-text {
height: 50px;
display: block;
}
a.my-text span {
position: absolute;
bottom: 0;
}
You can use bottom:0px with position:absolute in anchor.
HTML
<li><a class="my-text">My Text</a></li>
CSS
li {
position: relative;
height:200px;
border: 1px solid red;
}
a.my-text {
bottom: 0px;
border: 1px solid blue;
position: absolute;
background-color:#cccc;
width:100px;
height:50px;
}
See in jsfiddle.
It definitely would not work, because <a> anchors are inline tags, therefore assigning them heights and widths is useless. The vertical-align property determines the positioning of inline elements with respect to the line they're in, not the vertical position of the text. (See http://reference.sitepoint.com/css/vertical-align) As far as I understand what you are requesting cannot be done. However, there are alternatives, as suggested above, to achieve similar effects.
The issue with your code is that the anchor won't respond to height/width because it is an inline element. If you you add a {display: block} to the anchor it's now a block element, but, as I recall, vertical-align doesn't work on the contents of block elements. This was the easiest way I could think of using display: table-cell.
a.my-text {
background-color: #ccc;
height: 200px; width: 100px;
vertical-align: bottom;
display: table-cell;
}
It sounds like you just need to get rid of the height rule on the anchor tag and use something like padding-top: 45px on the li