I'm trying to alignt 3 text links - one to the left, one to the center, and one to the right, but they won't align correctly.
Here's the html code:
<div class="navi">
Link 1
Link 2
Link 3
</div>
The relevant CSS is:
.navi {
width: 100%;
}
.text-left {
display: inline
text-align: left;
}
.text-right {
display: inline
text-align: right;
}
.text-center {
display: inline
text-align: center;
}
What am I doing wrong?
Thanks!
That's not how text-alignment works. <a> tags are display:inline by default so you don't need to assign that value. You also need to assign the text-align to the parent container.
This CSS should do the trick for you:
.text-left {
float:left;
}
.text-right {
float:right;
}
.navi {
text-align:center;
}
Working example
You could do it this way...
HTML
<div class="navi">
Link 1
Link 3
Link 2
</div>
CSS
.navi {
width: 100%; /* Probably no need for this */
}
.text-left {
float: left;
}
.text-right {
float: right;
}
.text-center {
display: block;
text-align: center;
}
jsFiddle.
You may also want to use more semantic class names. They should describe the element's content or meaning, not the presentation.
You are using the text align property, which will align the text inside the link and not the link itself.
You can put a div with 100% as the width, and put these three links in that div with the property
float :left
float: right
i.e
<div width="100%" style="float:left">
<a href='' class='float-left'/>
<a href='' class='float-center'/>
<a href='' class='float-right'/>
</div>
.float-left{
float:left;
text-align :left;
}
.float-left{
float:right;
text-align :right;
width: 33%;
}
.float-center {
display: inline
text-align: center;
}
text-align is the text alignment inside the element, not the alignment of the elements, so each of the inlines elements is just the width of the text, and use the alignment of .navi
try changing them to inline block, and specifying widths i.e. 33%
.navi {
width: 100%;
}
.text-left {
display: inline-block;
text-align: left;
width: 33%;
}
.text-right {
display: inline-block;
text-align: right;
width: 33%;
}
.text-center {
display: inline-block;
text-align: center;
width: 33%;
}
Related
Given this basic 3 columns layout,
.wrapper {
display: table;
width: 100%;
}
.wrapper>div {
display: table-cell;
}
.center {
padding-top: 3em;
}
<div class="wrapper">
<div class="left">uno</div>
<div class="center">dos</div>
<div class="right">tres</div>
</div>
When adding padding-top to the .center div, the others also display it. How do I add a padding-top to the center div alone?
Its easy: Try to do the following:
.wrapper {
display: table;
width: 100%;
}
.wrapper>div {
display: table-cell;
vertical-align:top; // Add this line :)
}
.center {
padding-top: 3em;
}
When you use display: table-cell in a div, the div will align vertically to the center... so by doing vertical-align:top you will force all the divs align vertically to the top and then the center div will assume the padding as you desire.
I want to position the content of these two divs to the top.
HTML
<div class="menu">
<div></div>
</div>
<div class="content">
<h1>SDFSDFSD SDFSD</h1>
<h1>SDFSDFSD SDFSD</h1>
<h1>SDFSDFSD SDFSD</h1>
</div>
css
.
menu {
display: table-cell;
background-color: yellow;
width: 20%;
}
.menu > div {
padding: 20px;
background-color: red;
vertical-align: top;
}
.content {
display: table-cell;
background-color: blue;
width: 80%;
}
http://jsfiddle.net/99u4vm3g/
I tried with vertical-align: top and with position: absolute and top:0 with no luck.
What should I do to send those content to the top of their containers?
Thanks in advance!
You added vertical-align:top to the wrong place, it should be applied to the table-cell elements.
Updated: http://jsfiddle.net/tfqmwko1/
You need to put the vertical-align on the table-cell elements
.menu {
vertical-align: top;
}
.content {
vertical-align: top;
}
http://jsfiddle.net/99u4vm3g/1/
You are going to see the text still not at the top and that is due to the margin on the header elements
This one has no margin on the header tags http://jsfiddle.net/99u4vm3g/2/
I have a div which is supposed to be floating right (and it is) but I want some text inside that div to center relative to the float right, how do I do this?
I tried to center it like this:
<div class="input-group">
<span class="input-group-addon center">Verified:</span>
</div>
But it's not working.
Here's a fiddle of the situation:
http://jsfiddle.net/rLtb7dc7/1/
Try like this: Demo
Add display: block with / without margin, the content will be aligned to center
CSS:
.center {
text-align: center;
margin:0 auto;
display:block;
}
Try this css :
.floatRight {
float: right;
}
.formTitle {
font-weight: bold;
}
.input-group{
text-align:center;
}
You won't need the center class anymore and you'll avoid repeating rules.
try this
.floatRight {
float: right;
text-align: right;
width: 100%;
}
span{text-align: center;}
Just using all available Space inside the floated element by setting display to block. And set text-align: center;
.input-group {
display: block;
text-align: center;
}
Ok, so i have been looking around for someone with the same problem as me, but didn't find any(almost 100% shure some of you guys are going to link to to one).
I have managed to center a div inside a div which again is inside footer(pretty shure overkill). But my problem is that i have centered two images with two lines of text connected to them. I want the text to be displayed vertically centered(with the image in mind), and not in the bottom right corner of the images, like now.
Pretty shure it's something simple, but here is a link:
http://jsfiddle.net/rdsdmuw8/
<footer>
<div id="footer">
<div id="sosial">
<img src="bilder/telefon.jpg" style="height:50%;">
+47 930 98 907
<img src="bilder/mail.png" style="height:50%; margin-left:20%; margin-top:20px;">
Bryter-pedersen#hotmail.com
</div>
</div>
</footer>
*{
margin: 0px;
padding: 0px;
color: #fff;
}
footer {
width:100%;
height: 80px;
background-color: red;
}
#footer{
height: 100%;
}
#sosial {
text-align: center;
vertical-align: middle;
}
#sosial a{
list-style-type: none;
text-decoration: none;
}
In order to vertically align the img elements next to the anchors set vertical-align: middle for both of the elements.
#sosial img,
#sosial a {
vertical-align: middle;
}
In order to vertically center all the containing elements within the footer, you can use the table-cell/table approach.
#footer {
height: 100%;
width: 100%;
display: table;
}
#sosial {
text-align: center;
display: table-cell;
vertical-align: middle;
}
Updated Exmaple
I removed the inline CSS styling in the example. You can use img:nth-of-type() to apply the margin to the second element. Just throwing options out there.
#sosial img:nth-of-type(2) {
margin-left:50px;
}
if you know what is the height you want for the images you can use, in my example is 50px:
#sosial a {
list-style-type: none;
text-decoration: none;
line-height: 50px;
display: inline-block;
height: 100%;
vertical-align: middle;
}
I'm building a template for headlines that later on will have varying length. Before the headline is an icon. Why does the headline break, according to the icon width?
js fiddle
HTML
<img src="http://www.ecotricity.ch/pix/slideBanner/carLogo.gif" width="50"/>
<div>
<img src="http://png-1.findicons.com/files/icons/1241/twitter_land/256/school_of_fish.png" width="50"/>
<h3> The cars are faster than fish</h3>
</div>
CSS
div{
float: left;
margin-left: 30px;
}
img{
float: left;
}
It's because you're not clearing the float after the img element within the div.
You have two options. You can either use CSS to remove the float from that img element:
div img {
float: none;
}
JSFiddle demo 1.
Or add a clearing element within your div:
<img src="..." width="50"/>
<br style="clear:both"/>
<h3> The cars are faster than fish</h3>
JSFiddle demo 2.
If you want the h3 element to be alongside the img element, you can alter option 1 above to:
div img,
div h3 {
display: inline-block;
float: none;
}
JSFiddle demo 3.
Replace your div style with:
div{
float: left;
margin-left: 30px;
width:300px;
}
//increase the width of div
If your question is "Why does H1 have a line break" the answer is because it is a block level element; however, if you are asking how to accomplish something like having all the elements in a vertical line, you can do this: http://jsfiddle.net/rM6G9/7/
div{
float: left;
clear:both;
}
img{
float: left;
display: block;
}
h3{
float:left;
clear:both;
}
If you want the second image and the headline to be inline do this:
div{
float: left;
clear:both;
}
img{
float: left;
display: block;
}
h3{
float:left;
}