I'm trying to get a vertical alignment similar to baseline, but at the first line of text rather than the last. Neither top nor text-top gets the alignment right. Any ideas? Thanks!
edit: This assumes that the font size is the same in the elements being aligned. See comment below by #FelipeAls on the accepted answer.
edit: now with code sample and picture:
What I'm trying to do is vertically align the text in several inline-block elements so that their baselines are all in the same position. I'd rather not do something like nudging things using margins and padding, because I find whenever I do that, I ended up playing whack-a-mole with the different browsers.
HTML:
<div class="foo">
<span>one</span>
<span>two two two two</span>
<span>three three three three three three three three three</span>
<button type="button">action</button>
</div>
<div class="bar">
<span>one</span>
<span>two two two two</span>
<span>three three three three three three three three three</span>
<button type="button">action</button>
</div>
CSS:
body {
font-family: sans-serif;
font-size: 12px;
}
button {
font-family: inherit;
font-size: inherit;
}
div {
position: relative;
width: 500px;
text-align: center;
}
div.foo, div.bar {
margin-bottom: 2em;
}
div span {
text-align: center;
}
div.foo span {
display: inline-block;
width: 50px;
vertical-align: top;
}
div.bar span {
display: inline-block;
width: 50px;
vertical-align: baseline;
}
div button {
display: inline-block;
width: 125px;
}
See http://jsfiddle.net/don01001100/3t8v5L1j/3/.
I'm afraid that you can only do that with CSS box-model, such as margin, padding.
This is because the different inline-block elements are aligned at the baseline, but they have different padding / margin settings, so their text is aligned slightly off vertically. If you change the padding and margin of the <button>s and the <span>s to be the same, then it should work.
EDIT1
Actually, now that I think of it, you might be able to manually set values to vertical-align in pixels. Experiment with it (including negative values) to see what you want. It will depend on the paddings and margins of the <span>s and <div>s.
EDIT2
Actually, vertical-align: text-top works pretty well for me:
Related
I want to align an text to an exactly position, like 2cm from right not the pre-stabled positions like right, left and center. There's an example: Example
How can I center the Regular, upgraded and exclusive cases like that?
per my comment, here is how the text is centered, but the price tag is included as an inline element with the text.
html
<p class="container">
Text goes here
<span class="block">
$3
</span>
</p>
CSS
.block {
padding: 4px;
background: lightblue;
border-radius: 2px;
margin-left: 4px;
}
.container {
max-width: 400px;
text-align: center;
border: 1px solid;
}
EDIT:
based on the additional information you provided, it's not just aligning text that you were having an issue with, but also layout in general.
I've updated my example to show how you could align elements within a container using text-align: center; and converting the different text/price items to have display: inline-block;.
This is just an entry point to get you started. There are many other ways to layout content with CSS, from floats, flex-box and new CSS Grids. I suggest you review each to determine what is appropriate for your project.
Updated Demo: https://codepen.io/scottohara/pen/oWLxXN
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;
}
I want to gain a deeper understanding of how line-height works, in particular with centering text vertically within a fixed height element. In the example link below, you can see that setting the line-height to be equal to the container's height will center items as long as the items are all of the same size. When you put two different sized spans in, then the larger one will be centered, while the other will not be. I am at a loss to explain this, since both the large and small elements work separately. How can I accomplish having a large and small span to be centered (using line-height)? (and why is this behavior happening in the first place?)
.header {
background: grey;
width: 100%;
height: 65px;
}
.big, .small {
line-height: 65px;
}
.big {
font-size: 1.5em;
}
.
<div class="header">
<span class="big">A</span>
<span class="small">B</span>
</div>
<br/>
<div class="header">
<span class="small">A</span>
<span class="small">B</span>
</div>
<br/>
<div class="header">
<span class="big">A</span>
<span class="big">B</span>
</div>
JS Fiddle Example
This happens, because default vertical-align is baseline. If you switch it to vertical-align:middle you get the expected behaviour.
Edit for clarification:
As span's are inline elements they share the same baseline, regardless of the font size you are using. Vertical alignment of text is baseline initially, but by setting it to middle, you force these inline elements to align vertically centered.
More info on vertical align here: https://developer.mozilla.org/en/docs/Web/CSS/vertical-align
You need vertical-align: middle; . default value is baseline.
.big, .small {
line-height: 150px;
vertical-align: middle;
}
JSFiddle
In CSS, how can I center text around a specific word?
For instance, let's say I have the following DIV:
<div style="text-align: center;">
Previous Day | Navigation | Next Day
</div>
The text will technically be centered, but the word "Navigation" will NOT be in the exact middle. Rather, the middle will be exactly between the letters "v" and "i". This is because when centering text, the length of the entire string is taken into account.
How can I make the middle instead be between the "g" and the "a", using (preferably) only CSS? Modifying the HTML is also acceptable. As a last resort, I'm willing to use JavaScript, although only if it's kept simple, otherwise it's not worth it to use complex JavaScript for such a simple task.
Fixing the width of the elements containing "Previous Day" and "Next Day" is probably the simplest solution:
<div style="text-align: center;">
<div style="display: inline-block; width: 12em; text-align: right;">Previous Day</div>
<div style="display: inline-block;"> | Navigation | </div>
<div style="display: inline-block; width: 12em; text-align: left;">Next Day</div>
</div>
Fiddle here.
You can wrap your individual items in an HTML tag, like an anchor, and float them to achieve your desired result. Floating the tags places them side-by-side, and giving each item a percentage-width that collectively adds to 100% effectively centers the elements in their container.
Note, there are some pitfalls to using floats. You need to clear the parent div to properly lay out elements following a container with floated children. Also, if the child elements have any padding, this will be added to the percentage width and misalign the children unless you use box-sizing: border-box; on the child elements.
HTML
<div class="container">
Previous Day
<span class="separator">|</span>
Navigation
<span class="separator">|</span>
Next Day
</div>
CSS
.container {
color: white;
margin: 0 auto;
width: 80%;
min-width: 320px;
background-color: black;
overflow: hidden; /* to clear the div */
}
.container a {
text-align: center;
float: left;
width: 32%;
overflow: hidden;
background-color: orange;
}
.container .separator {
float: left;
text-align: center;
padding: .5%;
}
The colors are to show that it is centered in its parent element.
Here's a live demo jsFiddle
As you can see in thew image below, all items have different spacing between them and simply look awful.
This is what I currently have:
Here is the code (it's a mess) after trying tons of different tricks:
http://pastebin.com/D8ekkj6S
I'd be really thankful if someone could tell me how to properly do this correctly.
PS: If possible, I'd love to know how to vertically align the icon and it's corresponding text by the middle point.
Something like this should work for you:
HTML:
<div class="iconing">
<i class="icon-someIcon"></i>
<p>Your text</p>
</div>
CSS:
.iconing i, .iconing p {
display: inline-block;
vertical-align: middle;
}
[class^="icon-"],
[class*=" icon-"] {
width: 50px;
height: 50px;
line-height: 50px;
}
Replace all instances of 50px with your height.
First of all, don't use inline CSS. Try using this CSS instead:
img {
float: left;
clear: both;
margin-right: 10px;
}
p {
line-height: 45px;
}
For the whole example:
http://jsfiddle.net/VMfYa/
You could also set a bigger line height and set the icon as a background with a padding on the text to keep it away from the icon, or have an icon div and a text div, and float them both left beside each other using margin's to align them properly.
give more width to p
check this out fiddle demo