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;
}
Related
I am trying to create multiple horizontal div elements on a page http://jsfiddle.net/bss6mc5a/
#body-left { float: left; content:url(http://placehold.it/240x930);}
#body { display: inline; }
#body-right { float: right; content:url(http://placehold.it/240x930);}
The layout is how I would like it to be displayed however when I add text (remove the comment tag) to the the div is moving down when I would like it to stay in place.
Thank you for any assistance / correction in how I achieve this.
You need to define width for the divs:
#body-left { float: left; content:url(http://placehold.it/240x930);}
#body { float: left; width: 960px; }
#body-right { float: right; content:url(http://placehold.it/240x930);}
Updated Fiddle:
http://jsfiddle.net/bss6mc5a/3/
Update 2:
http://jsfiddle.net/bss6mc5a/7/
Instead of trying to float your elements left or right, you can just set fixed location objects.
I updated your JSFiddle to do what I'm thinking will help.
Basically, your left and right content areas would normally have fixed width (though your images make up for that), and would be positioned absolutely to put them in the right place, then the content is just centered with:
margin-left: auto;
margin-right: auto;
width: 300px; /* some arbitary width */
But check out the Fiddle, see if that helps.
check this out I thing this what you want click Demo
Some changes in CSS
#body {
display: inline;
width: 960px;
float: left;
text-align: justify;
}
Hope this will help you...
give your body divs a display: inline-block;
http://jsfiddle.net/bss6mc5a/5/
#body-left {content:url(http://placehold.it/240x930);display: inline-block; vertical-align: top;} #body { display: inline-block; vertical-align: top; width: 30%;} #body-right {content:url(http://placehold.it/240x930); display: inline-block; vertical-align: top;}
I have div in HTML, there is i Picture and a piece of text. I have all this center through margin, but it is all in left. Why?
HTML:
<div class="slozka">
<img src="http://randompics.net/gmig6jx/" alt="složka"></br>
{{object}}
</div>
CSS:
.slozka
{
width:125px;
padding:0px
}
.slozka > img
{
width: 100px;
height: 100px;
margin: 0 auto;
padding:0px;
}
.slozka:hover
{
border-style: outset;
}
Auto margins centre block elements. That image is display: inline (the default).
Set .slizka { text-align: center; } instead (this centres inline content).
You just need to provide "text-align: center;" to ".slozka{...}" class
You may need to center .slozka also.
.slozka
{
width:125px;
padding:0px;
margin: 0 auto;
text-align: center;
}
Also if </br> is supposed to be a line break then it is in correct, you need <br />
use this
.slozka { text-align: center; }
Im trying to make a picture display inline with text on it's right, AND at the same time positioned in the middle of the vertical axis to fit in the navigation bar.
At the moment, I can only get it to display inline but it always verges to the bottom of the bar rather than the top.
HTML:
<div id='profileBar'>
<img src='karl.png' width=25 id='profileBarPic'/>
Damen
</div>
CSS:
#profileBar {
float: right;
padding-right: 10px;
}
#profileBarPic {
width: 25px;
display: inline;
float: left;
padding-right: 10px;
}
What it looks like:
Text next to an image? That's how images have always worked. You can get the desired affect with a lot less markup:
<div id='profileBar'>
<img src='http://placekitten.com/50/50' id='profileBarPic'/>
Damen
</div>
And CSS:
#profileBarPic {
vertical-align: middle;
}
Fiddle
A little explanation. img is basically an inline element to begin with, so adding float and display: inline is not necessary.
By default img aligns with the baseline of its container (the bottom edge of an image will align with the bottom of a text line it is next to). vertical-align changes where the img should align itself to (in this case, you wanted the middle).
Try uploading a fiddle next time, I think this should fix it though:
#profilebar {
float: right;
padding-right: 10px;
display: table-cell;
vertical-align: middle;
}
put your text into a span or something so that you can put a display:inline-block on both it and the <img>. This way, you won't need the float:left. Then apply a vertical-align:middle
so:
HTML:
<div id='profileBar'>
<img src='karl.png' width='25' id='profileBarPic'/>
<span>Damen</span>
</div>
CSS:
#profileBar {
float: right;
padding-right: 10px;
}
#profileBar span {display:inline-block; vertical-align:middle; }
#profileBarPic {
width: 25px;
display: inline-block;
vertical-align:middle;
padding-right: 10px;
}
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%;
}
I have a float element on the left side on my page.
Now after this float, I want to center the rest of the content.
Please see here: http://jsfiddle.net/ETm93/13/
This is what I have now. I did float: left. I can do float: right to get it to the right side, but how should i get it centered of the space that is after the floated element. Example:
IMAGE (that is floated) | stuff here in middle |..
How can I do that?
Use text-align: center and display: inline
#profile_leftPanel{
width: 150px;
float: left;
border-right: 1px solid #666;
margin-right: 20px;
}
#profile_rightPanel_center {
margin-left:auto;
margin-right: auto;
text-align: center;
}
#recentStatus{
width: 400px;
text-align: center;
display: inline;
}
See http://jsfiddle.net/adamzr/QbMmX/
Have you tried changing
#profile_rightPanel_center {
float: left;
}
to
#profile_rightPanel_center {
text-align: center
}
For text only, use
text-align:center;