I have the following CSS Code:
.blackbox {
background: black;
width: 17px;
height: 18px;
line-height: 18px;
text-align: center;
}
In my HTML file, I call the following.
<div class="blackbox">
10
</div>
<img src="icon-local.png">
<img src="icon-national.png">
How can I keep the box that is rendered via CSS call and the images called via img tag on the same horizontal line?
The goal is to create something that looks similar to this, but with the CSS box in front of the other icons. Example Image: Example Image
Thanks in advance!
Ken
You can use display:inline-block or display:table.
<div class="parent">
<div class="blackbox">10</div>
<img src="icon-local.png" />
<img src="icon-national.png" />
</div>
And the css
.parent div, .parent img {
display:inline-block;
*display:inline; /* IE7 hack */
zoom:1 /* IE7 */
vertical-align:middle;
}
Make your blackbox class inline or inline-block:
.blackbox {
display:inline-block;
background: black;
width: 17px;
height: 18px;
line-height: 18px;
text-align: center;
}
The default display for <div> elements are "block" (that is, it adds a line break before and after it) so you could just use:
.blackbox {
background: black;
width: 17px;
height: 18px;
line-height: 18px;
text-align: center;
display: inline;
}
Notice the display: inline;
Also, display: inline-block; is also useful in many scenarios.
You need to define the div as display:inline-block and float your images to the left so that you have the same result as your example image. Floating your images can be avoided if you change your HTML and have the images before the div. See this demo: http://jsfiddle.net/G5Q4k/1/
Related
I came across this behavior recently when a client reported that some of the buttons on a page had vertically centered text while others did not.
As it turns out, buttons will vertically center text inside them but links won't. Example here: http://jsfiddle.net/valentin/7EjtD/
a, button{
height: 200px;
background-color: #ff6400;
color: #fff;
font-weight: bold;
display: inline-block;
vertical-align: top;
border: 0;
padding: 20px;
font-family: sans-serif;
text-decoration: none;
}
Is there any way to add this behavior to links as well outside of using line-height?
Button aligns to the middle because is its default behavior. Your fiddle is aligning top actually. To make it work you can wrap your elements on an display:table element, like a div. Then set the button and the link to be display:table-cell. Then your vertical-align will work. Like this:
<div class="wrapper">
LINK
<button>BUTTON</button>
</div>
And the css:
*{
box-sizing: border-box;
}
div.wrapper {
display:table;
}
a, button{
height: 200px;
background-color: #ff6400;
color: #fff;
font-weight: bold;
display: table-cell;
vertical-align: middle;
border: 0;
padding: 20px;
font-family: sans-serif;
text-decoration: none;
}
Buttons are inline-block elements, while anchors are just inline. You can use padding to achieve the same effect:
a
{
padding: 91px 20px; /* <---(height-fontSize)/2 */
height: auto;
}
JSFiddle
TableData (TD AKA cell) are pretty damn good at default text centering ;)
live demo
a{
display: table-cell;
vertical-align: middle;
}
for clean-code-sake i'd use a special class like:
a.buttonAlike{
Sorry folks! Didn't see he wanted to avoid line-height. Original post:
Add line-height equal to the height of your element. In this case:
line-height: 200px;
DEMO: JSFIDDLE
I would like to understand the correct way to align different size type between different div classes. Right now, the code forces the smaller type to align with the top of the larger type. How do I align the type across all divs on the same typography baseline with the cleanest code. This seems like really easy stuff, but I cannot find an answer.
I also hope this is semantically correct (I am trying to create a row of data that is responsive and can resize and rearrange (float) on different devices). All suggestions welcome.
Link to Demo
You need to adjust the line-height and possibly the vertical margins for each font size so the match a baseline grid.
I'd recommend reading this : http://coding.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/
Sounds like you need CSS' line-height property. That way you can make the lines of text the same height but affect font-size separately
#artist { /* Selector to affect all the elements you want */
color: #000;
font-size: 18px; /* Default font size */
line-height:18px; /* Line height of largest font-size you have so none go */
/* above the top of their container */
}
Demo
Adjusting where text is placed is done with padding and margin. but for this setting a p class to each of your divs gives you control of wher eyou want text placement within the div. of course your padding will vary for your baseline shift since you have mutiple em sizes of your fonts. fiddle http://jsfiddle.net/rnEjs/
#artist {
padding: 5px;
float: left;
width: 100%;
background-color: #036;
color: #000;
font-size: 18px;
overflow: hidden;
}
.genre {
width: 5em;
float:left;
height: 50px;
background-color: #09F;
}
.genre p {
padding:5px 5px;
}
.artistName {
float: left;
width: 175px;
height: 50px;
background-color: #F39;
}
.artistName p {
padding:5px 5px;
}
.birth {
float: left;
width: 5em;
height: 50px;
font-size: 12px;
background-color: #F90;
}
.birth p {
padding:15px 5px;
}
.medium {
float: left;
width: 10em;
height: 50px;
font-size: 12px;
background-color: #099;
}
.medium p {
padding:15px 5px;
}
.gallery {
float: left;
width: 10em;
height: 50px;
font-size: 12px;
background-color: #FF6;
}
.gallery p {
padding:15px 5px;
}
.website {
float: left;
width: 10em;
height: 50px;
font-size: 12px;
background-color: #99F;
}
.website p {
padding:15px 5px;
}
<div id="artist">
<div class="genre">
<p>Genre</p>
</div>
<div class="artistName">
<p>Artist First Last</p>
</div>
<div class="birth">
<p>birth year</p>
</div>
<div class="medium">
<p>medium</p>
</div>
<div class="gallery">
<p>gallery name</p>
</div>
<div class="website">
<p>website</p>
</div>
</div>
I found a good answer to your question from this Stackoverflow thread: Why is vertical-align:text-top; not working in CSS.
The gist of it is the following:
Understand the difference between block and inline elements. Block elements are things like <div> while inline elements are things like <p> or <span>.
Now, vertical-align attribute is for inline elements only. That's why the vertical-align didn't work.
Using the Chrome dev tool, you can tinker with your demo and see that it works: specifically, inside <div> tags, put <span> tag with appropriate style.
Problem
So I'm creating a simple navigation menu which contains a div of a tags. Currently it looks like this:
The follow are my HTML and CSS:
HTML
<div id="tabcontent-container">
<div class="tabcontent-menu">
WLAN Jumpstart
Mobility
Guest Access Jumpstart
</div>
</div>
The CSS
#tabcontent-container { padding: 15px 0px; position: relative; text-align: center; border-radius: 25px; -webkit-border-radius: 25px; }
.tabcontent-menu {}
.tabcontent-menu a { text-decoration: none; color: white; font-size: 30px; border-right: 1px solid white; line-height: 33px; padding: 0 22px; display: inline-block; width: 200px; height: 70px; vertical-align: top; }
.tabcontent-menu a:last-child { border:none; }
.tabcontent-menu a:hover { color:#000; }
Working example on Jsfiddle.net
The Question
I'm wondering if there is an easier way to align the middle "Mobility" a tag to the middle. The other two links look fine because they are double line. I purposely made them double line for a reason, and now just need the middle one to middle align some how.
Any suggestions?
You can use vertical-align: middle to adjust the position vertically. Since that only works on table cells, set display: table-cell for the .tabcontent-menu a
http://jsfiddle.net/H9VHs/8/
I usually accomplish something like this by varying the line-height.
.tabcontent-menu a.midline {
line-height: 64px;
}
See it here: http://jsfiddle.net/PZVnq/
Documentation/Further Reading
CSS line-height on MDN - https://developer.mozilla.org/en/CSS/line-height
Lauri Raittilan on Vertical centering with CSS - http://www.student.oulu.fi/~laurirai/www/css/middle/
Vertical centering with CSS on vanseodesign.com - http://www.vanseodesign.com/css/vertical-centering/
I have this code :
.myDiv
{
background-color: blue;
}
.myLink
{
background-color: red;
margin-top: 20px;
}
<div class="myDiv">
<a class="myLink" href="javascript:void(0)">Ciao</a>
</div>
if I increase the margin-top I'd aspect that the div becomes more hight (and the go to the bottom of the div), but in fact this doesnt happens! The same with padding-top (it go out of the div...). It doesnt listen the container!
Why? And how can I fix this trouble?
EDIT
in fact what Id like to do is align an input box and a image, you can see the example here :
<div>
<input type="text" />
<a style="margin-top:10px; margin-left:5px;" href="#">
<img alt="Cerca" src="/private_images/home_button_right.png">
</a>
</div>
Change to:
.myLink
{
background-color: red;
padding-top: 100px;
display: inline-block;
}
or
div {
padding-top: 100px;
}
depending on what you want to achieve.
Based on your update of the question:
Updated Demo fiddle.
CSS:
input,
img {
vertical-align: middle;
}
Or use vertical-align: top; to align the tops.
Do the opposite thing:
.myDiv
{
background-color: blue;
padding-bottom: 20px;
}
.myLink
{
background-color: red;
}
Add display: block; or maybe even better: display: inline-block;. Block elements can have height. Inline elements not.
You might also consider to give the anchor a larger line-height (e.g. line-height: 2em;), but that only works for single-line text.
.myDiv
{
background-color: blue;
}
.myLink
{
background-color: red;
display:list-item;
}
You can use display:list-item; to solve this problem
I have this
<div class="iconFriends"></div>
<div class="iconFavorite"></div>
<div class="iconPM"></div>
<div class="iconShield"></div>
and the css for the icons class looks all similiar to this:
.iconFriends{
background: url(../images/icons/friends_16x16.png) no-repeat;
width: 16px;
height: 16px;
border: none;
}
Now the results is that there is like a <br> when I do this. But if i remove the div and make a normal <img src="..."> It shows fine. How can i fix this?
set your divs to have display:inline-block or better yet remove the divs and apply the styling to the a tags directly (again with display:inline-block)
html
css
.iconFriends{
background: url(../images/icons/friends_16x16.png) no-repeat;
width: 16px;
height: 16px;
border: none;
display:inline-block;
}
try giving them all a float:left
In your CSS:
.iconFriends{
background: url(../images/icons/friends_16x16.png) no-repeat;
width: 16px;
height: 16px;
border: none;
float: left /* or right, depending on the desired outcome */
}
Option 1: replace the <div> with a <span>
Option 2: set the <div> to display: inline;. Its default display property value is block, which is why each one is on its own line.
.iconFriends {
display: inline;
...
I would suggest reversing the order of your elements, as such:
<div class="icon iconFriends"></div>
Note the extra icon class on the div.
Then use this for your CSS:
.icon a
{
display: block;
width: 16px;
height: 16px;
}
.iconFriends
{
background: url(../images/icons/friends_16x16.png) no-repeat;
width: 16px;
height: 16px;
border: none;
float: left;
}
Adding float: left; will put them all on the same line. Setting display: block; on the a will allow you to set the width and height (making the entire element clickable).