So I'm trying to vertical align images within a container div. I tried adding vertical-align: middle; to the parent div with no luck.
<div class="contributor_thumbnail"><img src="image.jpg"></div>
<div class="contributor_thumbnail"><img src="image.jpg"></div>
.contributor_thumbnail {
position: relative;
display: block;
float: left;
width: 150px;
height: 150px;
line-height: 100%;
text-align: center;
margin-right: 15px;
margin-bottom: 15px;
padding: 5px;
vertical-align: middle;
border: 1px solid #bbbbbb;
border-top: 1px solid #333;
border-left: 1px solid #333;
}
What I would do is set the image as a background image.
.contributor_thumbnail {
/* Background image instead of using and img tag */
background: url(image.jpg) center center no-repeat;
position: relative;
display: block;
float: left;
width: 150px;
height: 150px;
line-height: 100%;
text-align: center;
margin-right: 15px;
margin-bottom: 15px;
padding: 5px;
border: 1px solid #bbbbbb;
border-top: 1px solid #333;
border-left: 1px solid #333;
}
Try this:
HTML
<div class="contributor_thumbnail">
<div class="content">
<img src="image.jpg">
</div>
</div>
CSS:
.contributor_thumbnail {float:left; height:50%; margin-bottom:-120px;}
.content {clear:both; height:240px; position:relative;}
Inspired by: Lost in the Woods vertically centering with CSS.
.contributor_thumbnail img {
margin-left: auto;
margin-right: auto;
}
http://www.bluerobot.com/web/css/center1.html
Related
I'd like to make these elements fill the same line space with different font sizes. As you can see the first element "sets the standard" for the line height. All the following elements have white space above and below them. Regardless of the font size I want all the elements to fill the same space (%100 of line height). Anybody know? Thanks!
body{
background-color: #ffffff;
background-size: cover;
border: 5px solid yellow;
margin: 0px;
padding: 0px;
}
.head1{
text-align: center;
display:inline-block;
background-color: cornflowerblue;
border: 5px solid black;
padding: 0px;
margin-right: 0px;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
#par1{
display: inline-block;
background-color: aqua;
border: 5px solid pink;
margin: 0px;
}
#par2{
display: inline-block;
background-color: crimson;
color: #ffffff;
border: 5px solid green;
margin: 0px;
}
<h1 class="head1">Site title!</h1><p id="par1"> Here is some text! Format all this with HTML.</p><h2 class="head1">Header here.</h2><h2 class="head1">Another header.</h2><p id="par2">More paragraph text. Block vs inline? Position relative static, etc...</p>
You can set the same line-height for all, and set vertical-align to middle:
.head1, #par1,#par2{
line-height:28px;
vertical-align:center;
}
if you cant do that for some reason (must handle unknown font sizes), you can place your items in a wrapper and use flexbox:
.head1, #par1,#par2{
display: flex;
align-items: center;
}
.wrap{
display:flex;
flex-wrap: wrap;
}
<div class="wrap">
<h1 class="head1">Site title!</h1>
<p id="par1"> Here is some text! Format all this with HTML.</p>
<h2 class="head1">Header here.</h2>
<h2 class="head1">Another header.</h2>
<p id="par2">More paragraph text. Block vs inline? Position relative static, etc...</p>
</div>
An idea is to use flexbox and rely on the stretch effect but you should adjust the alignment.
body {
background-color: #ffffff;
background-size: cover;
border: 5px solid yellow;
margin: 0px;
padding: 0px;
display:flex;
flex-wrap:wrap;
}
.head1 {
text-align: center;
display: inline-flex;
background-color: cornflowerblue;
border: 5px solid black;
padding: 0px;
margin-right: 0px;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
#par1 {
display: inline-flex;
align-items:center;
background-color: aqua;
border: 5px solid pink;
margin: 0px;
}
#par2 {
display: inline-flex;
align-items:center;
background-color: crimson;
color: #ffffff;
border: 5px solid green;
margin: 0px;
}
<h1 class="head1">Site title!</h1>
<p id="par1"> Here is some text! Format all this with HTML.</p>
<h2 class="head1">Header here.</h2>
<h2 class="head1">Another header.</h2>
<p id="par2">More paragraph text. Block vs inline? Position relative static, etc...</p>
Or adjust the line-height for all the elements to the biggest one:
body {
background-color: #ffffff;
background-size: cover;
border: 5px solid yellow;
margin: 0px;
padding: 0px;
flex-wrap:wrap;
}
body > * {
line-height:37px;
vertical-align:bottom;
}
.head1 {
text-align: center;
display: inline-block;
background-color: cornflowerblue;
border: 5px solid black;
padding: 0px;
margin-right: 0px;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
#par1 {
display: inline-block;
align-items:center;
background-color: aqua;
border: 5px solid pink;
margin: 0px;
}
#par2 {
display: inline-block;
align-items:center;
background-color: crimson;
color: #ffffff;
border: 5px solid green;
margin: 0px;
}
<h1 class="head1">Site title!</h1><p id="par1"> Here is some text! Format all this with HTML.</p><h2 class="head1">Header here.</h2><h2 class="head1">Another header.</h2><p id="par2">More paragraph text. Block vs inline? Position relative static, etc...</p>
I got a menu to the left and a header up there. Then I got a black box to the right that is supposed to fill all of the remaining space to the right but the problem is that the black box doesn't float next to the menu, it floats left UNDER the menu. I would appreciate if someone could help me out with this.
JS: http://jsfiddle.net/GrXLa/1/
CSS:
body {
background-color: #ececec;
font-family: calibri;
font-size: 13px;
margin: 0;
padding: 0
}
.header {
min-height: 54px;
background-color: #4d7496;
font-size: 15px;
border-radius: 0;
margin: 0;
padding-right: 20px;
border-bottom: 4px solid #2a4053;
}
.sidebar {
width: 240px;
background-color: #f9f9f9;
position: absolute;
top: 58px;
left: 0;
min-height: 100%;
z-index: 10;
border-right: 1px solid #d1d1d1;
}
.sidebar .left_menu {
width: 180px;
padding: 15px 30px;
float: left;
background-color: #f9f9f9;
border-bottom: 1px solid #ebebeb;
color: #555555;
text-decoration: none;
}
.sidebar .left_menu:hover {
width: 177px;
background-color: #fdfdfd;
border-right: 3px solid #668eb0;
cursor: pointer;
}
.header_menu {
height: 14px;
padding: 20px;
color: #ffffff;
margin-right: -1px;
border-right: 1px solid #3d5c78;
border-left: 1px solid #3d5c78;
border-bottom: 4px solid #2a4053;
float: right;
}
.header_menu:hover {
background-color: #557a9a;
cursor: pointer;
}
.content {
width: 100%;
min-height: 100%;
background-color: #000;
color: #fff;
padding: 20px;
margin: 20px 0 20px 20px;
float: left;
border: 1px solid #000;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
text-align: center
}
.content h2.title {
font-size: 21px;
color: #efefef;
text-align: left;
margin-top: -5px;
border-bottom: 1px solid
}
.signin h2.title {
font-size: 21px;
color: #efefef;
text-align: left;
margin-top: 10px;
border-bottom: 1px solid
}
HTML:
<body>
<div class="header">
<img src="theme/default/images/logo.png" style="padding: 10px;"/>
<div class="header_menu"><img src="theme/default/images/lock.png" style="margin-right: 10px;" /> Logout</div>
<div class="header_menu"><img src="theme/default/images/user.png" style="margin-right: 10px;" />Edit Account</div>
</div>
<div class="sidebar">
<div class="left_menu"><img src="theme/default/images/home.png" style="margin-right: 10px;" />Dashboard</div>
<div class="left_menu"><img src="theme/default/images/coin.png" style="margin-right: 10px;" />Add Funds</div>
<div class="left_menu"><img src="theme/default/images/withdraw.png" style="margin-right: 10px;" />Withdraw Funds</div>
<div class="left_menu"><img src="theme/default/images/cart.png" style="margin-right: 10px;" />Place Order</div>
<div class="left_menu"><img src="theme/default/images/order.png" style="margin-right: 10px;" />My Order</div>
<div class="left_menu"><img src="theme/default/images/star.png" style="margin-right: 10px;" />Change Membership</div>
</div>
<div class="content">
<h2 class="title">Add Funds</h2>
</div>
Your problems are, that you
position the menu absolute, which takes it out of the "normal flow"
additionally set the content div to width: 100%
float the content div
So the solution is to avoid all of the above and simply give the content element a left margin of the width of the menu (in your case 240px). That's it ...!
Here is your updated JSFiddle.
Basicly, if you want an element aside a floatting element to use all space left avalaible, it should not float, it will by defaut use all width avalaible as a block element does.
To keep aside and not wrap belo or lay under the floatting element, you need to trigger its layout.
overflow:hidden; , here in this case will do the job. .content will mind floatting element inside it and outside it. Do not give it any width or height, there is no need. eventually a min-height can be used. DEMO
.content {
overflow:hidden;
min-height: 100%;/* this works if parent has an height set */
background-color: #000;
color: #fff;
padding: 20px;
margin: 20px 0 20px 20px;
border: 1px solid #000;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
text-align: center
}
Inside .content, image can or should be set to max-width:100%.
Beside , the absolute positionning comes out of the flow and is therefor not seen by other element of the page. Keep side bar floatting in the flow.
DEMO
.sidebar {
width: 240px;
background-color: #f9f9f9;
/* Useless without positionning
top: 58px;
left: 0;
min-height: 100%;
z-index: 10;*/
border-right: 1px solid #d1d1d1;
float: left;/* make it float in the flow*/
}
.sidebar .left_menu {
width: 180px;
padding: 15px 30px;
background-color: #f9f9f9;
border-bottom: 1px solid #ebebeb;
color: #555555;
text-decoration: none;
}
I have a inline-block element and some text on the same line. They don't seem to align on the same baseline.
<div>
<i class="avatar"></i>
<span>Name</span>
</div>
i.avatar {
display: inline-block;
width: 50px;
height: 50px;
box-sizing: content-box;
border: 2px solid black;
}
span {
display: inline-block;
border: 2px solid black;
}
Please see http://jsfiddle.net/Cr952/ for what I mean.
Any ideas to align them? Thanks.
Add vertical-align: bottom to i.avatar.
i.avatar {
display: inline-block;
width: 50px;
height: 50px;
box-sizing: content-box;
border: 2px solid black;
vertical-align: bottom;
}
Fiddle
Addvertical-align:bottom in i css
Is this what you want?
then use float:left as follow,
CSS
i.avatar {
display: inline-block;
width: 50px;
height: 50px;
border: 2px solid black;
float: left;
}
span {
display: inline-block;
border: 2px solid black;
float: left;
}
I'm making a 'topic' design, and I am having issues again. I have a floating div (to the left) inside a container div and it's going outside of it's boundries. It's dynamic, so setting a height: property will not suffice. Now I know it's the float: left; that's causing it, but how can I try fitting in it? I tried setting outer div to display: table; which works, but then it doesn't set the other div next to the floating one to fill the width.
html:
<div class="reply-wrapper">
<div class="reply-box">
<div class="reply-header">
<span id="post-id">#1</span>
<span id="post-date">Today, 12:08</span>
</div>
<div class="reply-main">
<div class="user-info">
<div class="username-wrap">
<span id="username">Jakes625</span>
<!-- img online or not? -->
</div>
<span id="usertitle">Admin</span>
<ul class="user-stats">
<li>Posts: 99</li>
<li>Rep: 99</li>
<li>Likes: 99</li>
</ul>
</div>
<div class="reply-data">
<div class="reply-post">
<h2>Post Title</h2>
<p>
So this is some text that goes in a post.
</p>
</div>
<div class="reply-signature">
This is an example signature.
</div>
</div>
</div>
<div class="reply-footer">
<span class="reply-button">Reply With Quote</span>
</div>
</div>
</div>
css:
.reply-wrapper{
background-color: #DDD;
border-radius: 6px;
padding: 6px;
font: normal 12px arial, helvetica, sans-serif;
color: #333;
}
.reply-box{
border: 1px solid #c6c6c6;
border-radius: 4px;
margin-bottom: 30px;
}
.reply-box:last-child{
margin-bottom: 0;
}
.reply-header{
background-color: #474747;
border-bottom: 1px solid #c6c6c6;
border-radius: 4px 4px 0 0;
padding: 4px;
color: #FFF;
}
.reply-header #post-id{
float: right;
}
.reply-main{
background-color: #ebebeb;
}
.reply-main .user-info{
width: 180px;
float: left;
background-color: #e5e5e5;
border-right: 1px solid #c6c6c6;
padding: 10px;
}
.reply-main .reply-data{
margin-left: 200px;
margin-right: 0px;
}
.user-info .username-wrap,.user-info #usertitle{
text-align: center;
display: block;
text-align: center;
}
.username-wrap #username{
font-size: 11pt;
}
.user-stats{
margin: 0;
padding: 0;
list-style-type: none;
margin: 10px 0 10px 0;
}
.user-stats li{
background: #f2f2f2 none;
color: #3e3e3e;
border: 1px solid #c6c6c6;
margin-bottom: 3px;
padding: 4px;
line-height: 20px;
}
.reply-post{
padding: 10px;
}
.reply-post h2{
margin: 0;
padding: 0;
border-bottom: 1px solid black;
}
.reply-signature{
border-top: 1px solid #c6c6c6;
padding: 10px;
}
.reply-footer{
padding: 4px;
height: 15px;
background-color: #d8d8d8;
border-top: 1px solid #c6c6c6;
}
.reply-footer .reply-button{
float: right;
}
PAGE SOURCE: http://jakes625.toomanylols.com/thread.html
change:
.reply-main .user-info{
width: 180px;
float: left;
background-color: #e5e5e5;
border-right: 1px solid #c6c6c6;
padding: 10px;
}
.reply-main .reply-data{
margin-left: 200px;
margin-right: 0px;
}
to:
.reply-main .user-info{
width: 180px;
display: inline-block;
background-color: #e5e5e5;
border-right: 1px solid #c6c6c6;
padding: 10px;
}
.reply-main .reply-data{
margin-left: 200px;
margin-right: 0px;
display: inline-block;
}
This will display both divs side by side, while stretching the outer div to make them fit. If what you want is the contrary (make the div's height equal the outer div's height, regardless of it's content) then the other posted answer is what you're looking for
jsfiddle here
Overflow hidden the reply-wrapper part (the outter container)
CSS
.reply-wrapper {
background-color: #DDDDDD;
border-radius: 6px 6px 6px 6px;
color: #333333;
font: 12px arial,helvetica,sans-serif;
padding: 6px;
overflow: hidden;
}
or
.reply-main {
background-color: #EBEBEB;
overflow: hidden;
}
For some reason I can't align my divs next to each other. "Right" goes under "left"
What is wrong with my code?
HTML:
<div id="activity-container">
<div id="activity-left">left</div>
<div id="activity-right">right</div>
</div>
CSS:
#activity-container
{
width:90%;
background-color:#FFFF00;
Height:400px;
margin-left: auto;
margin-right: auto;
}
#activity-left {
border: 1px solid black;
color:#000;
margin: 0 auto;
width: 20%;
float: left;
position: relative;
}
#activity-right {
border: 1px solid black;
margin: 0 auto;
color:#000;
width: 80%;
float: left;
position: relative;
}
Live demo: Tinkerbin
Your borders on the div-s adding 2px to their width. Remove them and they will be next to each other - jsFiddle
If you really need the borders, then mimic them with outline - jsFiddle
#activity-left {
outline: 1px solid #000;
color:#000;
margin: 0 auto;
width: 20%;
float: left;
position: relative;
}
#activity-right {
outline: 1px solid #000;
margin: 0 auto;
color:#000;
width: 80%;
float: left;
position: relative;
}
You only need to remove float and margin properties from CSS
#activity-right
{
border: 1px solid black;
color: #000;
width: 80%;
position: relative;
}
Than it will work as per your expectation.
If you want to retain the border, you can try changing the width:
#activity-container
{
width:90%;
background-color:#FFFF00;
Height:400px;
margin-left: auto;
margin-right: auto;
}
#activity-left {
border: 1px solid black;
color:#000;
margin: 0 auto;
width: 19%;
float: left;
position: relative;
}
#activity-right {
border: 1px solid black;
margin: 0 auto;
color:#000;
width: 80%;
float: left;
position: relative;
}
Check Jsfiddle