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;
}
Related
My paper-input is extending outside of the parent div, and I don't know why. I've tried setting the bottom margin but it does nothing. Here's what I have, the borders are for testing and will be removed later.
#main {
width: 100%;
height: 100%;
border: 2px solid transparent;
}
.sliderContainer {
width: 100%;
height: 60px;
border: 2px solid transparent;
}
.label {
width: 100%;
margin-left: 6px;
}
.labelValue {
margin-left: 10px;
color: #A6A6A6;
}
.sliderDiv {
width: 100%;
height: 40px;
display: inline-block;
border: 2px solid transparent;
}
.button {
width: 1px;
height: 30px;
float: left;
display: inline-block;
border: 2px solid transparent;
}
.slider {
width: 50%;
height: 30px;
margin-top: 3px;
margin-right: 34px;
display: inline-block;
border: 2px solid transparent;
}
.syncOffset { /* This is the issue. */
width: 16%;
height: 40px;
display: inline-block;
border: 2px solid transparent;
}
.syncOffsetDiv {
width: 5%;
display: inline-block;
}
example
Figured it out, it was the label that was causing an issue. I added no-label-float to remove the floating label and vertical-align: top to the class and that made it work.
I have three inline block elements inside a a container div.
The HTML looks like this:
<div class="container">
<div class="field">Text</div>
<div class="field">Text</div>
<div class="arrow"></div>
</div>
The CSS looks like this:
.container {
padding: 10px;
border: solid 1px #e5e5e5;
border-radius: 3px;
background-color: white;
box-sizing: border-box;
font-size: 0;
}
.field {
font-size: 16px;
display: inline-block;
}
.arrow {
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #f00;
vertical-align: middle;
}
I can't see anything wrong with this HTML/CSS, but the arrow does not appear in the middle of the container. Instead, the arrow is near the bottom of the container. Also, when I unset the vertical-align: middle property, the arrow moves farther up in the div, which is weird. If I set vertical-align: top then the arrow does go to the top of the div. Any idea why this is?
Default vertical-align is baseline. This will operate differently than true middle when paired with middle. Try setting all three to middle.
.container {
padding: 10px;
border: solid 1px #e5e5e5;
border-radius: 3px;
background-color: white;
box-sizing: border-box;
font-size: 0;
}
.field {
font-size: 16px;
display: inline-block;
vertical-align: middle;
}
.arrow {
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #f00;
vertical-align: middle;
}
<div class="container">
<div class="field">Text</div>
<div class="field">Text</div>
<div class="arrow"></div>
</div>
Change .arrow from inline-block to inline
https://jsfiddle.net/aznfacLe/
I'm trying to make two div's appear aside each other, but it just isn't working.
I'm trying to create a search bar and button that look joined together. I'm almost there, except that my button appears below, and not inline with the div.
Shouldn't this work? Where am I going wrong, and how do I get this right?
<!DOCTYPE html>
<html>
<head>
<title>Search Bar</title>
<style>
input {
border: none;
height: 18px;
outline: none;
padding: 5px;
}
button {
border: 1px solid rgba(0, 39, 59, 0.2);
margin: 0;
height: 28px;
padding: 0;
width:100px;
}
.outer {
width: 500px;
border: 1px solid #ccc;
padding: 10px;
}
.inner {
width: 395px;
border: 1px solid #ccc;
border-right:none;
}
.button {
display: inline-block;
float: right;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"><input type="text"></div>
<div class="button"><button>Search</button></div>
</div>
</body>
</html>
change css as
.inner {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #CCCCCC -moz-use-text-color #CCCCCC #CCCCCC;
border-image: none;
border-style: solid none solid solid;
border-width: 1px medium 1px 1px;
display: inline-block;
float: left;
width: 395px;
}
input {
border: medium none;
height: 18px;
outline: medium none;
padding: 5px;
width: 380px;
}
.button {
display: inline-block;
overflow: hidden;
}
button {
border: 1px solid rgba(0, 39, 59, 0.2);
height: 28px;
margin: 0;
padding: 0;
width: 100px;
}
Hope this will work fine for you....
add
display:inline-block;
to .inner
http://jsfiddle.net/MrdHc/
fiddle: http://jsfiddle.net/Varinder/CD3kS/
setting display:inline-block will get you there.
now there are a few interesting things with elements that are inline-block
they get default letter spacing around them which is normally 4px
they need a display:inline;zoom:1; hack to work in ie7
updated css bits:
.outer {
...
vertical-align:middle;
}
.inner {
...
display:inline-block;
*display:inline;
*zoom:1;
}
.button {
display: inline-block;
*display:inline;
*zoom:1;
/*float: right*/
margin-left:-4px;
}
.button button { height:30px; }
I'm just reading css design pattern of Apache and have an issue about overflowed inline element in a block element.Here is the link
http://www.cssdesignpatterns.com/Chapter%2004%20-%20BOX%20MODELS/Inline%20Box/example.html
You can see that the inline element with class "box" stays in the same line box in chrome but go to the next line in firefox, while the desired behavior is what firefox does.
Can anyone explain for me why there is the difference in firefox and chrome???
Here is the html:
<div class="container">
<span class="default">BEFORE</span>
<span class="box">← Left ↑ Top
Bottom ↓ Right → </span>
<span class="default">AFTER</span>
</div>
Here is the css
.container {
border: 1px solid gray;
}
.default {
line-height: normal;
width: auto;
height: auto;
overflow: visible;
visibility: visible;
margin: 0;
padding: 0;
border: none;
background-color: gold;
}
.box {
line-height: 100px;
margin-left: 100px;
margin-right: 100px;
padding: 20px 120px;
border-left: 5px solid gray;
border-right: 5px solid black;
border-top: 5px solid gray;
border-bottom: 5px solid black;
background-color: gold;
overflow: scroll;
width: 99999px;
height: 99999px;
margin-top: 99999px;
margin-bottom: 99999px;
}
.default {
line-height: normal;
width: auto;
height: auto;
overflow: visible;
visibility: visible;
margin: 0;
padding: 0;
border: none;
background-color: gold;
}
Here is the fiddle link
http://jsfiddle.net/GRwUp/
Try giving the container a width and padding:
.container {
border: 1px solid gray;
width: 350px;
}
Here is a fiddle: http://jsfiddle.net/GRwUp/1/
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