I have elements from a div that goes out of their container because I use line-height. But the only way I found to make vertical-align work is by using line-height.
Can anyone explain me why I have that behavior and how to fix it ?
Also do anyone have advices or best practices on how to use vertical-align ?
Here is the code :
#resources {
background-color: green;
width: 100%;
height: 64px;
}
.resourceContainer {
float: left;
text-align: center;
vertical-align: middle;
line-height: 64px;
width: 33.3%;
}
Example (Don't pay intention to images path)
You just need to reset the line-height for the inner div (because the line-height is inheritant):
.resourceContainer > div {
display:inline-block;
line-height:100%;
vertical-align:middle;
}
Demo
NOTE: The vertical-align is applied to the element itself not to the child elements. So you don't need to set vertical-align:middle for the .resourceContainer, instead set it for the direct inner div.
Related
I know how to align text vertically inside a div, but I am unsure on how to do it if the div has a percentage height and width. Here is my code:
<div id="header">
<h1>Home</h1>
</div>
#header {
background-color: red;
color: white;
text-align: center;
vertical-align: middle;
width: 100%;
height: 15%;
}
Now on my webpage the text in the div has been aligned correctly horizontally but not vertically. How do I fix this problem? Can you also try to explain your answers and keep them as simple as possible please (I'm still relatively new at HTML/CSS). Thank you.
You can use the flexbox model to easily center things.
Just add the following rules to your container:
display:flex;
justify-content: center; //horizontal centering
align-items:center; //vertical centering
FIDDLE
Note this is probably a more general solution than what you expected, but what's really cool about flexbox is that it works in many different cases, including yours (example with an h1 tag here).
Try giving display:inline-block to your h1 tag.
DEMO
You can just add:
display:inline-block
to your h1
example: http://jsfiddle.net/24pwprvf/
Add line-height matching the height of the container:
#header {
background-color: red;
color: white;
text-align: center;
vertical-align: middle;
width: 100%;
height: 15%;
line-height: 0.15em;
}
You should not use line-height for the effect you desire as suggested by Praveen Above.
You can get the same affect by either putting, 'display: inline-block' in either the #header div or in the #header h1 css style.
the first part is not advisable.Best practice will be to use it in the h1 style only.
I am trying to make a div with text and a div with a button fit side by side. It works fine until you make the screen really narrow. Is there a way to force them to be on the same line and for the first div to shrink to accommodate the min-width of the second?
http://jsfiddle.net/C3877/9/
To see what I mean, resize the window, reducing the width, until the div with the button is forced onto the second line. That is what I'd like to prevent.
Note: I only care if a suggested fix works properly in Chrome.
Instead of floats, you could use display: inline-block. This will keep things all on one line, and respect the min-width as well.
Inline-block fiddle: http://jsfiddle.net/C3877/8/
In addition, since you only care about Chrome, you could look into flexible boxes
A (quick) flex fiddle here: http://jsfiddle.net/C3877/11/
You can use negative margin-left for the floated right element. Note that this solution keeps using float for both the left and right divs, without using float, you have dozens of solutions (as some of other answers pointed out).
#right_div {
...
margin-left:-100%;
}
Note that all the next content should be wrapped in a block element and use clear:both. I also added a sample of such an element with background:green in this DEMO.
Appending this does the trick I suppose:
#media (max-width:515px) {
#left_div { width: 100%; margin-right: -100px }
}
UPDATED
You could use margin and absolute positioning:
CSS
#parent_div {
width: 100%;
height: 10%;
position: relative;
min-width: 40px;
}
#left_div {
width: 80%;
min-width: 100px;
height: 80%;
float: left;
background-color: #000;
color: #FFF;
}
#right_div {
width: 15%;
min-width: 100px;
float: right;
background-color: blue;
position:absolute;
right: 0px;
}
input[type=button] {
font-size: 2rem;
}
SEE DEMO: http://jsfiddle.net/C3877/19/
You will have to play with some of the css to get it just right when you move it on your website. But this is a sure quick fix.
I have a container div and 5 child div's with
{display: inline-block}
so they appear next to each other. Each of the child div's have a height of 20px, but the container grows to a height of 24px. Why does this happen?
Fiddle: http://jsfiddle.net/VHkNx/
Inline block elements still take care of the line-height/font-size. So adding this:
line-height: 0;
to #container will fix it.
Demo
Try before buy
Once you're using the inline-block display, your elements behaves similarly to words and letters. Whitespaces and line heights are rendered as well and it might cause some unexpected results.
One way of solving this is to give the container font-size: 0 setting (of course you can still give the child elements themselves their own font size).
jsFiddle Demo
P.S - line-height: 0 will also work.
One simple way of fixing this is to add vertical-align: top to the child elements:
.thing {
vertical-align: top;
display: inline-block;
background-color: Red;
height: 20px;
width: 18%;
margin-left: 1.25%;
margin-right: 1.25%;
}
This way, you don't need to adjust line heights or font sizes.
As noted earlier, a similar layout can be realized using floats. Both approaches are valid.
See demo at: http://jsfiddle.net/audetwebdesign/74Y2V/
Inline-block elements are placed as block on the base line of a text line, as they are inline elements, so it's the space from the base line to the bottom of the text line that takes up space.
You can use floating elements instead of inline elements:
#container {
background-color: Green;
width: 500px;
overflow: hidden;
}
.thing {
float: left;
background-color: Red;
height: 20px;
width: 18%;
margin-left: 1.25%;
margin-right: 1.25%;
}
#first {margin-left: 0px;}
#last {margin-right: 0px;}
Demo: http://jsfiddle.net/VHkNx/2/
Easiest way is not to give them display: inline-block, but use float: left; . All elements will float next to each other. Good luck!
I have the following js-fiddle. It's basically just a div that has a bunch of square child elements. The issue is that the div doesn't always stay centered. I've already set the following CSS:
.boutique-grid {
text-align: center;
margin-left: auto;
margin-right: auto;
}
I am not sure why it's not centering the child element div's. Any idea?
Remove float left from your .boutique-grid-column class. It will solve the issue.
The boutique-grid is centered, but it's 100% wide. You can set a width to for example, 710px;
.boutique-grid {
overflow: hidden;
width: 710px;
}
.boutique-grid {
text-align: center;
}
.boutique-grid-column {
...
margin: 0 auto;
}
Remove float:left; and this will work fine, you already have display:inline-block; set so no need to float the element.
http://jsfiddle.net/wy7rd/3/
This is what the spec says about float:
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property).
This is why .boutique-grid-column becomes block when float is specified and ignores text-align.
Set width of div and image.
.boutique-grid {
width: 300px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
Friends, here is a very simple problem I am facing. I am having a container called 'testDiv', and inside the container one paragraph to test. The problem is when I am targetting to the paragraph ( .testDiv p ) and assigning margin-top: 75px;, it is affecting to the container also. so, here is what i want. I want to move-down only the paragraph not the container. Is there any poosibility without using absolute position to the paragraph.
here is what i tried so far - http://jsbin.com/adudih/1/edit
You have multiple ways to accomplish this:
Work with padding-top and not margin-top:
http://jsbin.com/etazem/2/edit
Use line-height on the paragraph tag and set it to the same height as your container: (With this method you will have problems with text-wrapping if the text overflows the container width):
http://jsbin.com/etazem/1/edit
Padding vs Margin:
http://www.impressivewebs.com/difference-between-margins-padding-css/
Use padding-top instead of margin-top. So it should be
.testDiv p {
display: block;
padding-top: 75px;
color: white;
}
Update:
The reason why it affect the container is because you've assign the styling like this .testDiv p. It will refer to .testDiv first, then only p.Another way you can just style the paragraph by assigning a class name for it and do the margin.
<div class='testDiv'>
<p class="p-style">Some text to play around.</p>
</div>
.p-style{
margin-top: 75px;
}
Check here, DEMO http://jsfiddle.net/yeyene/Ted2F/1/
For p css, use float & margin-top instead of line-height
Play around the p margin-top and see.
.testDiv {
width: 200px;
height: 300px;
background-color: blue;
text-align: center;
position: relative;
}
.testDiv p {
float:left;
background:green;
margin-top: 130px;
color: white;
}