This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 8 years ago.
http://jsfiddle.net/UmHNL/2/
<div class="container">
<span>Some text, yay</span>
</div>
<div class="container">
<span>Some text, yay. But shit time, there is alot of text, so we get a problem with breaking lines and the given height :( How can I align vertical now?</span>
</div>
<style>
.container {
width: 100%;
height: 50px;
line-height: 50px;
border: 1px solid black;
}
.container span {
padding-left: 30px;
}
</style>
This solution works great until the screen-width is too small - breaking my text into several lines.
When I google the problem I find so many crazy over-complicated solutions with javascript and divs to push my content in place.. Can anyone help me make this work without adding more markup? :)
There's no need to support Internet Explorer and older browsers.
Thanks
You should try this:
.container {
width: 100%;
height: 50px;
border: 1px solid black;
display: table;
text-align: center;
}
.container span {
display: table-cell;
vertical-align: middle;
}
Update you CSS to
.container {
width: 100%;
height: 50px;
display: table-cell;
border: 1px solid black;
text-align: center;
vertical-align: middle;
}
.container span {
}
Related
This question already has answers here:
Vertically-aligned inline-block element not perfectly centered within container
(2 answers)
Closed 1 year ago.
the img cannot be centered vertically when i use vertical-align, I really dont understand why.
h1 {
position: relative;
line-height: 50px;
background: blanchedalmond;
}
h1::before {
content: '';
position: absolute;
top: 50%;
width: 100%;
border-top: 1px solid green;
}
img {
width: 30px;
height: 30px;
vertical-align: middle;
}
<h1>
<img src="https://img01.yzcdn.cn/vant/cat.jpeg" />
vertical-align middle
</h1>
First, you don't have vertical align middle applied. You have posted it as text in your HTML but as such, it also only works as text but not as a code command.
Then, vertical-align: center; only works in combination with tables or table-cells. So you would need to apply: display: table-cell;. However, the more modern solution would be flexbox. Use: h1 { display: flex; align-items: center; } and the image will be vertically centered within the <h1> tag.
Then you have 2 issues:
The critical issue: <h1><div></div></h1> is an invalid HTML markup that will neither pass the W3C nor the WHATWG markup check. A <div> cannot be a child within a header tag.
The minor issue is with the <img /> tag. Since HTML5 the image tag is an empty tag. Means it does not have a closing tag nor does it have a slash at the end. It's simply written <img>. Only a few frameworks/libraries still use the slash.
h1 {
position: relative;
line-height: 50px;
background: blanchedalmond;
display: flex;
align-items: center;
}
.line {
position: absolute;
top: 50%;
width: 100%;
border-top: 1px solid green;
}
img {
width: 30px;
height: 30px;
}
<h1>
<div class="line"></div>
<img src="https://img01.yzcdn.cn/vant/cat.jpeg" />
vertical-align middle
</h1>
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 4 years ago.
When a div is next to another larger one in the same container, the smaller one stays at the bottom. I would like it to start from the top, any idea how to do that?
See the example below. I would like the red box to come all the way up, of course without using something like position-relative then just moving it up in px or em
Bonus points if someone can explain where the spacing between my boxes come from since I did not specify any padding or margin ;)
.container {
background-color: blue;
width: 700px;
height: auto;
}
.small {
width: 200px;
height: 200px;
display: inline-block;
background-color: red;
}
.big {
height: 400px;
width: 400px;
display: inline-block;
background-color: green;
}
<div class=container>
<div class=small></div>
<div class=big></div>
</div>
vertical-align works on elements that are display: inline-block; - so simply add vertical-align: top;
As for the spaces, that's the "whitespace" between your elements, which exists because the divs are on separate lines. There's a handful of solutions to this, one of which is simply keep the closing </div> and opening <div> immediately adjacent (like so: </div><div>), which I have implemented in the snippet below.
.container {
background-color: blue;
width: 700px;
height: auto;
}
.small {
width: 200px;
height: 200px;
display: inline-block;
vertical-align: top;
background-color: red;
}
.big {
height: 400px;
width: 400px;
display: inline-block;
vertical-align: top;
background-color: green;
}
<div class=container>
<div class=small></div><div class=big></div>
</div>
The best solution to problems of container and child item layout is CSS Flexbox. Note that I added display: flex and align-items: flex-start to your container. That second one has the magic which aligns all child items to the top. Follow the link above for a very helpful reference. Also note that your spacing issue is fixed.
.container {
background-color:blue;
width: 700px;
height: auto;
display: flex;
align-items: flex-start;
}
.small {
width:200px;
height:200px;
display:inline-block;
background-color:red;
}
.big {
height: 400px;
width:400px;
display:inline-block;
background-color:green;
}
<div class=container>
<div class=small></div>
<div class=big></div>
</div>
There may be a better solution out there, but if you float each element left it will give you your desired output.
.container {
background-color: blue;
width: 700px;
height: auto;
}
.small {
width: 200px;
height: 200px;
display: inline-block;
background-color: red;
}
.big {
height: 400px;
width: 400px;
display: inline-block;
background-color: green;
}
.left{
float: left
}
<div class="container left">
<div class="small left"></div>
<div class="big left"></div>
</div>
Just add vertical-align: top; to both elements.
Also the space is added because both elements are inline-block and are considered as text elements, you can fix that by setting font-size to 0 to the parent element, like that:
.container{
font-size: 0;
}
And don't forget to set the right font size to the child elements if you're going to add some text to them, example :
.small, .big{
font-size: 16px;
}
This question already has answers here:
How to center a flex container but left-align flex items
(9 answers)
Closed 4 years ago.
Scenario :
I have a list of inline-block elements that I'm able to center.
But when the number of elements don't fit on a line, Todo : I would like
them to be justified to the left.
I've been messing with flex boxes
and other things, but I seem to only be able to do one at a time
(center the entire element or justify the elements left).
Anyone know
how to accomplish this?
Below is the jsfiddle I've been messing around with, as well as some images that are hopefully helpful.
What I have:
What I want:
https://jsfiddle.net/bonbonlemon/bu1y93Ls/52/
Code:
jsx:
<div>
<button onClick={this.handleClick}>Increase!</button>
<div id="items-box">
{ items.map((item, idx) => (
<div className="item-box" key={idx}>{item}</div>
))}
</div>
</div>
CSS:
#items-box {
margin: 50px;
text-align: center;
}
.item-box {
display: inline-block;
height: 100px;
width: 110px;
margin-right: 15px;
margin-top: 20px;
outline: thin solid black;
}
Try to use flexbox:
https://jsfiddle.net/hapu8ny2/
html,
body {
min-height: 100%;
}
#items-box {
display: flex;
flex-direction: row;
flex-wrap: wrap
}
.item-box {
display: flex;
min-height: 100px;
min-width: 110px;
margin-right: 15px;
margin-top: 20px;
outline: thin solid black;
}
Note: see i use min-height and min-width instead
This question already has answers here:
Vertically align text next to an image?
(26 answers)
Closed 7 years ago.
I want both the image and text centered horizontally and vertically. What is the best way to go about this? I have tried float but it doesn't seem to be working. See the above image for ideal result
HTML:
<div class="clearfix" id="one">
<img class="imac" src="imac.png">
<p1>
I want to work in Computer Design, changing the way people
interact with thoughtfully considered software and hardware
experiences.
</p1>
</div>
CSS:
#one{
background-color: #4E5B71;
width: 100%;
height: auto;
padding: 15px;
}
.clearfix{
overflow: auto;
}
p1{
font-family: AvenirNext-Regular;
font-size: 24px;
color: #FFFFFF;
line-height: 50px;
vertical-align: middle;
display: inline-block;
}
imac{
width: 100% auto;
height: auto;
float:left;
vertical-align: middle;
}
SOLUTION 1
Demo: https://jsfiddle.net/2Lzo9vfc/78/
HTML
<div class="clearfix" id="one"> <img class="imac" src="http://placehold.it/70x50"> <p> I want to work in Computer Design, changing the way people interact with thoughtfully considered software and hardware experiences. </p>
</div>
CSS
#one{
background-color: #4E5B71;
width: 100%;
height: auto;
padding: 15px;
display: table;
}
.clearfix{
overflow: auto;
}
p{
font-family: AvenirNext-Regular;
font-size: 16px;
color: #FFFFFF;
vertical-align: middle;
display: table-cell;
}
.imac {
vertical-align: middle;
display: table-cell;
}
SOLUTION 2 using flexbox
Demo: https://jsfiddle.net/2Lzo9vfc/81/
CSS
#one{
background-color: #4E5B71;
width: 100%;
height: auto;
padding: 15px;
display: -webkit-flex;
display: flex;
align-items:center;
}
.clearfix{
overflow: auto;
}
p{
font-family: AvenirNext-Regular;
font-size: 16px;
color: #FFFFFF;
}
The vertical-align property does not work in that context. It is a bit counter-intuitive but vertical-align will only effectively work in a table layout.
You have a few ways to solve your predicament, but on the topic of tables, it might not be a bad idea to use a table to assist with your alignment. For example, you could put create a table with one row <tr> and four table cells <td> and apply your vertical-align to the table cells. The image would be in cell two, and the paragraph in cell three. You would then apply the desired width to the cells to ensure correct horizontal alignment.
PS: There is no <p1> tag. You should be using just <p>.
To center the text, you should use text-align: center.
p1{
font-family: AvenirNext-Regular;
font-size: 24px;
color: #FFFFFF;
line-height: 50px;
display: inline-block;
text-align: center;
}
You can also use a paragraph to wrap the image and control it. You can use the same paragraph formatting as the text below it or give it its own class. Just make sure it also has text-align: center programmed in it.
<p1><img class="imac" src="imac.png" /></p1>
How can I align text in the center of a div without using height, line height and padding?
<div id="slot">
<p id="element">100 </p>
</div>
#slot {
width: 70px;
border: 2px solid black;
background-color: #00ffee;
overflow: hidden;
}
#element {
text-align: center;
}
I supose that you want to align vertically right? I don't know if I've understood well what you are asking, but I've done this.
HTML
<div id="slot"><p id="element">100 </p></div>
CSS
#slot {
width: 70px;
border: 2px solid black;
background-color: #00ffee;
display:table;
height:150px;
text-align: center;
}
#element {
display:table-cell;
vertical-align:middle;
}
I only added three lines in CSS. display:table for the parent and display:table-cell for the child. Finally I added vertical-align: middle to display the text on the middle if the height increments, and put text-align:center at container div.
Here you have an example
The text-align is a property to be set on the parent really, so put it in the #slot css
http://jsfiddle.net/uFpCL/
#slot {
width: 70px;
border: 2px solid black;
background-color: #00ffee;
overflow: hidden;
text-align: center;
}
If you want the content of the #element tag to be centered, take #newpatriks' approach. But if you want the #element to be in the middle of the #slot element, you could add this css to the #slot element:
#slot {
display: table-cell;
text-align: center;
vertical-align: middle;
}
This way, all children of #slot will be centered in there.
http://jsfiddle.net/A7S8h/3/
I think you should explore the flexbox. Its supposed to be the Holy Grail of layouts using css. A quick tutorial:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
Use margin to adjust your text
#slot {
margin:auto;
width: 70px;
border: 2px solid black;
background-color: #00ffee;
overflow: hidden;
text-align: center;
}
it works fine now try ..
jsfiddle
I see this is pretty outdated question, but in case someone still looking for answer, here is the simple solution for 2022:
just set class to element .centerInsideDiv and in css:
.centerInsideDiv {
display: grid;
justify-items: center;
align-items: center;
Hope i helped somebody today!