HTML & CSS: Vertical centering of inline elements inside an inline-block - html

I've read about 20 questions and articles on vertical alignment/centering in HTML/CSS, but I'm still unable to get my specific case working a expected.
Please have a look at http://jsfiddle.net/pf29r/3/
<div class="outer">
<div>Left1</div>
<div>Left2</div>
</div>
<div class="inner">
Before
<span>Middle</span>
After
</div>
<div class="outer">
<div>Right1</div>
<div>Right2</div>
</div>
.outer {
display: inline-block;
}
.inner {
display: inline-block;
}
I want to vertically center the content of the inner block. The best I've been able to accomplish was by using display: table and display: table-cell, which almost works, but the content isn't quite in the middle.
What am I missing?

Add vertical-align: middle to .outer. This is counter-intuitive because you would expect to have to add it to .inner, but it works.
http://jsfiddle.net/pf29r/5/

Related

How Do I Align Divs With Different Heights?

I'm having trouble aligning my divs. My divs have no set height so they take the height of how much text is inside.
Here is a photo of what it looks like now.
Notice the prince post is aligned right and under that post is another post aligned under it. I can't seem to figure out what's going wrong in this.
Here is my html:
<div class="row" style="padding:30px 10px 30px 20px; margin:auto; display:block;">
<div class="large-12 column large-columnz">
<img src="">
<div class="row column">The Title
Article Excerpt</div>
</div>
</div>
</div>
Here is the css:
.large-columnz {
max-width:560px;
margin-bottom:10px;
display: inline-block;
vertical-align: top;
*display: inline;
}
I am using the Foundation responsive framework to design my site as well as my own incorporated css.
Can anyone tell me what I am doing wrong which causes the last two post to not align.
in the parent div that wraps all the divs ( if you don't have a wrapping div then add 1 ) and then add display: flex; in the parent div style and all the child containers will have the same height..

Allow inline-block elements to wrap before stacking

I have two divs next to each other that are displayed using inline-block. As the viewport shrinks, I'd like the text in the leftmost div to wrap before the divs collapse vertically, but I can't seem to make that happen. JSFiddle here.
In the demo, when the viewport shrinks "Should stay in block" is pushed below the title block, whereas I'd like the "Lots of text I want to wrap" to start wrapping to keep the two blocks on the same line.
Use display: table-cell; Instead of display:inline-block will solve your issue.
.title {
display: table-cell;
vertical-align: top;
}
.box {
display: table-cell;
vertical-align: top;
}
<div class="title">
<h1>Hi</h1>
<h2>Lots of text I want to wrap</h2>
</div>
<div class="box">
Should stay in a block
</div>
Check your updated Fiddle Here.
Can't you make them to fill the body or the container giving them a 50% width?
JSfiddle
EDIT: JSfiddle with a wrapper
.title {
display: inline-block;
vertical-align: top;
background-color:red;
width:50%;
}
.box {
display: inline-block;
vertical-align: top;
background-color:blue;
width:50%;
}
<div class="title">
<h1>Hi</h1>
<h2>Lots of text I want to wrap</h2>
</div><div class="box">
Should stay in a block
</div>
Edit: remember to not wrap after the first div, and make sure that there are not spaces </div><div class="box"> so you can use 50% preserving the inline-block

Show Centered Text Next to Site's Icon

Complete noob here with HTML/CSS.
I'm trying to get something like this : http://imgur.com/Bc72V4M
Here is my code:
<div id="topbar">
<div class="image">
<img src="images/ghwlogo.png">
</div>
<div class="text">
<h1>TEXT TEXT TEXT TEXT TEXT</h1>
</div>
</div>
I've tried floating the div topbar, then display-inline but it never displays horizontally.
I'm so confused. Following tutorials is easy-peasy, but when you need to figure out how to do this yourself, it's completely different.
I think I'm missing a step somewhere. I feel like this should be really easy but it's not.
img {
display: inline;
vertical-align: middle;
}
.subhead {
display: inline;
vertical-align: middle;
}
<div>
<img src="http://dummyimage.com/100x100/000/fff"/>
<h1 class='subhead'>
TEXT
</h1>
</div>
I removed some HTML; I only add more when I can't think of how to get the effect with just CSS. You can add some back, but you may have to set display: inline on some inner elements then.
Generally, a few different ways of putting elements horizontally:
Floating: Removes it from standard flow layout, and may interfere with the root element's total height. Was previously the preferred method of placement but I feel like there are better alternatives.
Display Inline: Treats an element a bit like text. Cannot have a custom height or various other attributes.
Display Inline-Block: Often a "fix-all" for me when I want something laid out horizontally, but to have other styling aspects like height, border, etc.
Position Absolute: You can make a higher element a "relative element" for absolute positioning by setting position: relative on it. Like floating this takes it out of layout, but it can even overlap elements; useful for certain things. Don't rely on absolute pixel amounts too much.
In my case, once things are laid out horizontally, vertical alignment is the next issue. Remember that adding content could make this block very very tall, so you can't just say "vertical-align to the bottom of the thing". Think of all elements in the div as simply letters in a paragraph; for the smaller ones, you're telling it how to align that one letter. For the biggest ones, you're telling it where that "letter" is aligned compared to the others. So, it's important to set vertical alignment how you want it on the image as well.
EDIT: updated answer per #Katana314 answer. I've maintained the OP's markup.
#topbar {
width: 100%;
overflow: hidden;
}
.image {
display: inline-block;
vertical-align: middle;
border: 5px solid black;
height: 100px;
width: 100px;
}
.text {
display: inline-block;
vertical-align: middle;
}
Fiddle: https://jsfiddle.net/dgautsch/che0dtfk/
You could make the image and the text a separate div and then have both of them under the inline-block attribute. The text div would need to have a position: absolute attribute, though, for formatting purposes.
After viewing the Fiddle, you can adjust the left position attribute accordingly to generate space. Here is the link: https://jsfiddle.net/kuLLd866/.
HTML:
<body>
<div class="image">
<img src="http://gfx2.poged.com/poged/game_logo_default_fix.png?2492">
</div>
<div class="imagetext">
<h1>Text text text</h1>
</div>
</body>
CSS:
.image {
display: inline-block;
}
.imagetext {
position: absolute;
top: 50px;
display: inline-block;
}

Vertical aligning never ever works

Yes, obviously I'm doing it wrong. Why can't it be as easy as horizontally aligning stuff? I sit and my work is halted for hours on end trying to look up how to vertically align in the middle, so I don't have to bug you guys with my stupid most-likely really easy to you question.
Display Block or Table-Cell, everything I read never works. I thought "maybe if I horizontally align my img with .divID img and then vertically align the div itself" sadly, I wish that'd work. But even when I did try centering the div vertically in the middle, it messed up the image centering and didn't even work.
TL;DR: I hate trying to vertically align stuff so much.
I'm trying to get my header image centered vertically and horizontally. This my code I'm working off.
HTML
<div id="wrapper">
<div id="header">
<div id="logo">
<img src="http://i.imgur.com/d0umnxt.png" />
</div>
</div>
</div>
CSS
body {
margin: 0px;
}
#header {
width: 100%;
height: 100px;
background-color: #151B1F;
}
#logo {
display: block;
margin: auto;
}
I hate table and table-cell just as much as the next guy, but when you know the height of the parent element (#header in your case), things become really easy.
Here's a working fiddle.
You just need to add the following styles to your CSS:
#header {
display: table;
}
#logo {
display: table-cell;
vertical-align: middle;
text-align: center;
}

How do you align a div vertically without using float?

When doing something like this:
<div style="float: left;">Left Div</div>
<div style="float: right;">Right Div</div>
I have to use an empty div with
clear: both;
which feels very dirty to me.
So, is there a way to align without the use of float?
Here is my code:
.action_buttons_header a.green_button{
}
<div class="change_requests_container" style="width:950px !important">
<div class="sidebar">
Preview New Version
</div>
<div class="content_container">
<div class="content">
<div class="action_buttons_header">
<a href="/changes/merge_changes/422" class="re_publish publish green_button" style="
margin: 5px 0px 5px auto;
">Apply Changes</a>
</div>
<div id="change_list_container">
<div class="changes_table">
<style type="text/css">
#original_492 .rl_inline_added {
display: none;
}
#492.change_container .actial_suggested_text_container{
display: none;
}
</style>
<div class="content_section_header_container">
<div class="content_section_header">
The Zerg |
Overview
<div class="status" id="492_status">
<div id="492_status_placeholder">
</div>
</div>
</div>
</div>
<div class="change_container" id="492">
</div>
</div>
</div>
</div>
I want the green button on the right of the horizontal bar that it's in but in the cleanest way possible.
Just trying to learn how to do CSS elegantly, cleanly, etc.
Another way to do something similar is with flexbox on a wrapper element, i.e.,
.row {
display: flex;
justify-content: space-between;
}
<div class="row">
<div>Left</div>
<div>Right</div>
</div>
In you case here, if you want to right-align that green button, just change the one div to have everything right-aligned:
<div class="action_buttons_header" style="text-align: right;">
The div is already taking up the full width of that section, so just shift the green button the right by right-aligning the text.
you could use things like display: inline-block but I think you would need to set up another div to move it over, if there is nothing going to the left of the button you could use margins to move it into place.
Alternatively but not a good solution, you could position tags; put the encompassing div as position: relative and then the div of the button as position: absolute; right: 0, but like I said this is probably not the best solution
HTML
<div class="parent">
<div>Left Div</div>
<div class="right">Right Div</div>
</div>
CSS
.parent {
position: relative;
}
.right {
position: absolute;
right: 0;
}
It is dirty better use the overflow: hidden; hack:
<div class="container">
<div style="float: left;">Left Div</div>
<div style="float: right;">Right Div</div>
</div>
.container { overflow: hidden; }
Or if you are going to do some fancy CSS3 drop-shadow stuff and you get in trouble with the above solution:
http://web.archive.org/web/20120414135722/http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack
PS
If you want to go for clean I would rather worry about that inline javascript rather than the overflow: hidden; hack :)
Another solution could be something like following (works depending on your element's display property):
HTML:
<div class="left-align">Left</div>
<div class="right-align">Right</div>
CSS:
.left-align {
margin-left: 0;
margin-right: auto;
}
.right-align {
margin-left: auto;
margin-right: 0;
}
Very useful thing have applied today in my project. One div had to be aligned right, with no floating applied.
Applying code made my goal achieved:
.div {
margin-right: 0px;
margin-left: auto;
}
You could just use a margin-left with a percentage.
HTML
<div class="goleft">Left Div</div>
<div class="goright">Right Div</div>
CSS
.goright{
margin-left:20%;
}
.goleft{
margin-right:20%;
}
(goleft would be the same as default, but can reverse if needed)
text-align doesn't always work as intended for layout options, it's mainly just for text. (But is often used for form elements too).
The end result of doing this will have a similar effect to a div with float:right; and width:80% set. Except, it won't clump together like a float will. (Saving the default display properties for the elements that come after).
No need to add extra elements. While flexbox uses very non-intuitive property names if you know what it can do you'll find yourself using it quite often.
<div style="display: flex; justify-content: space-between;">
<span>Item Left</span>
<span>Item Right</span>
</div>
Plan on needing this often?
.align_between {display: flex; justify-content: space-between;}
I see other people using secondary words in the primary position which makes a mess of information hierarchy. If align is the primary task and right, left, and/or between are the secondary the class should be .align_outer, not .outer_align as it will make sense as you vertically scan your code:
.align_between {}
.align_left {}
.align_outer {}
.align_right {}
Good habits over time will allow you to get to bed sooner than later.