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;
Related
I have this code here:
https://jsfiddle.net/pj1zmL6j/
I'm trying to get the loginbox to stay on the same Y as the logo. I've tried different ways with float and display-inline and other results I've found with google, but when setting float or display:absolute on the logo, it disappears to the left instead(but the logobox doesn't get pushed down)
Code:
#top {
width: 100%;
}
#head {
float: left;
width: 694px;
margin: auto;
text-align: center;
}
#user {
width: 25%;
float: right;
margin: 0 25px 0 25px;
border: 1px solid white;
display: inline-block;
}
<div id="top">
<div id="head">
<h1>logo</h1>
</div>
<div id="user">loginbox</div>
</div>
Try adding
display: flex;
align-items: center;
To the #top id
Example : https://jsfiddle.net/zpo4gf75/2/
Edit
I tried making the Logo stay in the center all the time.
Check the fiddle: https://jsfiddle.net/tksL54g0/2/
The problem is your use of fixed and dynamic widths (percents).
Here is an example of only use percents to achieve your goal: https://jsfiddle.net/v1wvyc1v/
#top {
width: 100%;
}
#head {
float: left;
width: 75%;
text-align: center;
}
#user {
width: 25%;
float: right;
}
When you have a fixed width, fixed margin and fixed border sizes added you will run into issues. All of these were causing your login box to wrap below.
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;
}
Link to site
/*Align width 1170px*/
.align-1170{
height: 100%;
width: 1170px;
margin: 0 auto;
}
/*Align vertically*/
.align-vertically{
height: 100%;
display: table;
}
/*Header*/
header{
height: 60px;
width: 100%;
background-color: #1ccb56;
}
.logo{
display: table-cell;
vertical-align: middle;
}
.author{
float: right;
display: table-cell;
vertical-align: middle;
}
Why Can't I use float:right; to move "Author: projekcior.com" to right side
(with vertically alignment)?
Why my h3 tag is so wide? (650px)
Thanks!
An element that is floated is automatically display: block;
use
h3 { display:inline-block; }
to manage your h3 width.
Let me answer your question in steps.
Why Can't I use float:right; to move "Author: projekcior.com" to right side (with vertically alignment)?
Maybe because, you're not setting the margins to it. It actually is to the right side of the web page. I just tried to use margin for it.
p.white {
margin: 20px;
}
Using this, it came down a bit from the top corner.
Why my h3 tag is so wide? (650px)
Because you've not set any of the width: value to the element, so browser would automatically set the width. I used width property to minimize the size.
h3 {
width: 200px;
}
Here is the screen shot for your page.
Hey Komon i guess you didn't write a proper css for your webpage so i tried to correct your page see the mentioned below CSS :-
CSS
.align-vertically {
border: 1px solid;
}
.align-1170 {
height: 100%;
margin: 0 auto;
width: 1170px;
}
.logo {
float: left;
}
h3 {
border: 1px solid;
display: inline-block;
font-family: 'Lato',sans-serif;
font-size: 1.5em;
}
.author {
float: right;
}
see the css and try to understand where u made mistake actually your parent div were not floated that's why your child div are not in control....
apply this css i guess through this you will achieve your desired results...
I'm trying to place buttons on the left and the right side of a scrollable div. See this jsfiddle[1] where they are still wrapped. So I changed the display of content and btn to inline-block. See this next version of the jsfiddle[2]. That sort of worked, but the buttons are not nicely aligned. And I actually don't have any idea why. So how come and why is that?
I am confused with you saying buttons are not nicely outlined, but I guess you meant align, than you have to use vertical-align: top; as you are using display: inline-block; so your buttons are aligned to the baseline.
.btn {
width: 30px;
height: 40px;
display: inline-block;
vertical-align: top;
}
Demo
You can also float all your elements to the left as #Jarno suggested, but if you are going with float than make sure you clear your elements using clear: both; property, else you will end up with undesired positioning of your elements.
make all elements floating ~> DEMO
.content {
width: 300px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
height: 40px;
display: inline-block;
float: left;
margin: 0 10px;
}
.btn {
width: 30px;
height: 40px;
display: inline-block;
float: left;
}
OR you can use vertical-align for elements to fit each other vertically
You could use float:left; on .content and .btn.
Also, don't forget to put overflow:hidden; on your .container.
Example
You need to add float positions to each .btn. float left for the left arrow and float right
Add the vertical align to the buttons:
.btn {
width: 30px;
height: 40px;
display: inline-block;
vertical-align: top;
}
http://jsfiddle.net/y84VA/7/