I faced a problem with css and html. I need to center the text in the box. When I place text, all boxes are going bottom little bit.
Here is my code
.box {
width: 100px;
height: 100px;
background: #cce;
display: inline-block;
margin-left: 10px;
}
<div id="3box">
<div class="box">
<p>Title</p>
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
Add vertical-align: top; and text-align: center; to .box like this:
.box {
width: 100px;
height: 100px;
background: #cce;
display: inline-block;
margin-left: 10px;
vertical-align: top;
text-align: center;
}
<div id="3box">
<div class="box">
<p>Title</p>
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
To center the text vertical and horizontal and dont wanna care about the text length you can do it with the table - table-cell method like
.box {
width: 100px;
height: 100px;
background: #cce;
float: left;
margin-left: 10px;
display: table;
}
.box p {
display: table-cell;
text-align: center;
vertical-align: middle;
}
<div id="3box">
<div class="box">
<p>Title</p>
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
This provides also a great browser support.
To center text in the blocks add text-align: center;
.box {
width: 100px;
height: 100px;
text-align: center;
vertical-align: top;
background: #cce;
display: inline-block;
margin-left: 10px;
}
<div id="3box">
<div class="box">
<p>Title</p>
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
Related
So I centered my text. But now there is a white space between body and the div. This is the HTML:
.parent-aligner {
background: #f2f2f2;
width: 100vw;
height: 500px;
text-align: center;
}
.parent-aligner .aligner {
display: table-cell;
height: inherit;
width: inherit;
vertical-align: middle;
}
<div class="container-fluid">
<div class="parallax">
<div class="parent-aligner">
<div class="aligner">
<p class="textcontent">lorem ipsum text</p>
</div>
</div>
</div>
</div>
I think what causes this is the width: 100vw;. But when I change it to width:100%; the text isn't centered anymore. Any suggestions on how to fix this?
Deduct the width of the scrollbar from the viewport width for smaller screen sizes...
EDIT: Add max-width property.
(And also remove the margin on body)
body {
margin: 0;
}
.parent-aligner {
background: #f2f2f2;
width: 100vw;
max-width: 100%;
height: 500px;
text-align: center;
}
.parent-aligner .aligner {
display: table-cell;
height: inherit;
width: inherit;
vertical-align: middle;
}
<div class="container-fluid">
<div class="parallax">
<div class="parent-aligner">
<div class="aligner">
<p class="textcontent">lorem ipsum text</p>
</div>
</div>
</div>
</div>
try this
.parent-aligner {
background: #f2f2f2;
width: 100%;
height: 500px;
text-align: center;
display:table;
}
.parent-aligner .aligner {
display: table-cell;
height: inherit;
width: inherit;
vertical-align: middle;
}
<div class="container-fluid">
<div class="parallax">
<div class="parent-aligner">
<div class="aligner">
<p class="textcontent">lorem ipsum text</p>
</div>
</div>
</div>
</div>
I am trying to display multiple circles on the same horizontal axis but with different width and height. The problem is that the circles are shrinked.
body,
html {
height: 100%;
margin: 0;
padding: 0;
}
.circles-container {
display: table;
border-spacing: 40px;
}
.row {
display: table-row;
}
.circle {
width: 100px;
height: 100px;
border: 1px solid #000;
border-radius: 50%;
text-align: center;
vertical-align: middle;
display: table-cell;
}
.cell {
display: table-cell;
}
.big-circle {
width: 300px;
height: 300px;
}
<div class="circles-container">
<div class="row">
<div class="cell">
<div class="circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="big-circle circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="big-circle circle">
<span>TEXT</span>
</div>
</div>
</div>
</div>
JSFIDDLE: https://jsfiddle.net/cxuxgy0u/
You should not use the table layout for this. Your HTML does not semantically represent a table, so table element is worng to use.
What you want to do can be achieved with Flexbox.
article {
display: flex;
align-items: center;
}
article > div + div {
margin-left: 1rem;
}
article > div {
flex-shrink: 0;
height: 4rem;
width: 4rem;
border-radius: 50%;
border: solid 1px black;
display: flex;
justify-content: center;
align-items: center;
}
article > div:nth-child(2) {
height: 6rem;
width: 6rem;
}
<article>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
</article>
You might want to read more about Flexbox on MDN.
A simple flexbox solution. Just be sure to set flex-shrink to 0, because the initial value is 1, which allows flex items to shrink when necessary to prevent overflowing the container.
body,
html {
height: 100%;
margin: 0;
padding: 0;
}
.circles-container {
display: flex;
align-items: center;
}
.circle {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex: 0 0 100px; /* flex-shrink: 0, to disable shrinking default */
height: 100px;
border-radius: 50%;
margin: 20px;
border: 1px solid #000;
}
.big-circle {
flex-basis: 300px;
height: 300px;
}
<div class="circles-container">
<div class="circle">
<span>TEXT</span>
</div>
<div class="circle">
<span>TEXT</span>
</div>
<div class="big-circle circle">
<span>TEXT</span>
</div>
<div class="circle">
<span>TEXT</span>
</div>
<div class="big-circle circle">
<span>TEXT</span>
</div>
</div>
https://jsfiddle.net/cxuxgy0u/7/
Try this:
HTML
<div class="container">
<div class="circle">Text</div>
<div class="circle">Text</div>
<div class="circle">Text</div>
<div class="circle">Text</div>
</div>
CSS
.container {
display:flex;
justify-content: space-around;
align-items: center;
height: 100vh;
}
.circle {
background: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.circle:nth-child(odd) { width: 100px; height: 100px; }
.circle:nth-child(even) { width: 200px; height: 200px; }
Uses flexbox and is the simplest way to achieve what you want.
Here's a fiddle https://jsfiddle.net/itsag/sk3tdo4L/
Hope it helps!
I think your problem is found in the styling.
For each circle, you need to remove the style
display:table-cell
vertical-align: middle;
and then u need to bring in line-height. The line-height should be equal to the height of the circle, for for the smaller circle, you will have
line-height:100px //this brings the text to the middle of the circle vertically.
Then also, you need to increase the border-radius from 50% to 100%
border-radius:100%;
Therefore, your css will not look like this
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.circles-container{
display: table;
border-spacing: 40px;
}
.row {
display: table-row;
}
.circle {
width: 100px;
height: 100px;
border: 1px solid #000;
border-radius: 100%;
text-align: center;
line-height:100px;
}
.cell {
display: table-cell;
}
.big-circle {
width: 300px;
height: 300px;
line-height:300px;
}
This should help you.
Flexbox:
container {
display: flex;
justify-content: center;
}
If you want space between the pictures, use:
margin-left:
or
margin-right:
try this
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.circles-container{
display: table;
border-spacing: 40px;
}
.row {
display: flex;
}
.circle {
padding: 40px 30px;
border: 1px solid #000;
border-radius: 50%;
text-align: center;
vertical-align: middle;
position: relative;
}
.cell {
}
.big-circle {
padding: 150px;
}
<div class="circles-container">
<div class="row">
<div class="cell">
<div class="circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="big-circle circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="big-circle circle">
<span>TEXT</span>
</div>
</div>
</div>
</div>
I'm following this SO Answer to vertically align a div's contents that has float: left styling:
.main {
height: 85px;
}
.child_1,
.child_2 {
float: left;
width: 8rem;
}
<div class="main">
<div style="display: inline-block;vertical-align: middle;">
<div class="child_1">
Some long text is put here
</div>
</div>
<div style="display: inline-block;vertical-align: middle;">
<div class="child_2">
22
</div>
</div>
</div>
But, it doesn't vertically align as per the height of the wrapper div main. What is wrong in the code?
If you add
display: flex;
align-items: center;
to .main class, it should work.
.main {
height: 85px;
background-color: #f00;
/*position: absolute;*/
/*top: 2rem;*/
display: flex;
align-items: center;
}
.child_1,
.child_2 {
float: left;
width: 8rem;
}
<div class="main">
<div style="display: inline-block;vertical-align: middle;">
<div class="child_1">
Some long text is put here
</div>
</div>
<div style="display: inline-block;vertical-align: middle;">
<div class="child_2">
22
</div>
</div>
</div>
In the linked question, you can see that the line box aligns itself, but not exactly with the main - try setting a height for the main and you'll see.
You've height set for the main here and that makes all the difference. For this you can use a psuedo element to center:
.main:after{
display: inline-block;
vertical-align: middle;
height: 100%;
content: '';
}
See demo below:
.main {
height: 85px;
border: 1px solid;
}
.child_1,
.child_2 {
float: left;
}
.main:after{
display: inline-block;
vertical-align: middle;
height: 100%;
content: '';
}
<div class="main">
<div style="display: inline-block;vertical-align: middle;">
<div class="child_1">
Some long text is put here
</div>
</div>
<div style="display: inline-block;vertical-align: middle;">
<div class="child_2">
22
</div>
</div>
</div>
I want to center vertically text, when the elements height is unknown?
html
<div class="table">
<div class="table-resp">
<div class="second-row">
<div class="col-md-5">
<div class="left-col-text">
Center vertically
</div>
</div>
<div class="col-md-7">
<div class="right-col-text">
<div class="example">Ex1</div>
<div class="example">Ex2</div>
<div class="example">Ex3</div>
</div>
</div>
</div>
</div>
</div>
css
/* CSS used here will be applied after bootstrap.css */
.table{
text-align: center;
padding-top: 70px;
padding-left: 0px;
padding-right: 35px;
}
.table-resp{
border: 1px solid green;
overflow-x: hidden;
}
.text1{
float: left;
display: inline-block;
}
.second-row{
line-height: 30px;
clear: left;
min-height: 30px;
overflow: auto;
}
.left-col-text{
height: 100%;
}
Elements "Ex1, Ex2" count is unknown, so, if there are more of those, obviously, the table row will get bigger in height. I need some solution, that would be responsive to this also...
https://www.codeply.com/go/bp/4ZEUS7Q7lm
Just add row-ht-eq class to row <div class="second-row">
CSS:
.row-ht-eq {
display: flex;
align-items: center;
}
position: absolute;
top: 50%;
transform: translateY(-50%);
Also you can play with:
display: table-cell;
vertical-align: middle;
Note: Use span Element as helper.
Html:
<div class="col-md-5">
<span class="helper"></span>
<div class="left-col-text">
Center vertically
</div>
</div>
Css:
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
Full Code:
.table{
text-align: center;
padding-top: 70px;
padding-left: 0px;
padding-right: 35px;
}
.table-resp{
border: 1px solid green;
overflow-x: hidden;
}
.text1{
float: left;
display: inline-block;
}
.second-row{
line-height: 30px;
clear: left;
min-height: 30px;
overflow: auto;
}
.left-col-text{
height: 100%;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="table">
<div class="table-resp">
<div class="second-row">
<div class="col-md-5">
<span class="helper"></span>
<div class="left-col-text">
Center vertically
</div>
</div>
<div class="col-md-7">
<div class="right-col-text">
<div class="example">Ex1</div>
<div class="example">Ex2</div>
<div class="example">Ex3</div>
</div>
</div>
</div>
</div>
</div>
Change your text class to:
.left-col-text {
margin:0 auto;
}
This will automatically decide equal distance from top to bottom.
I need the following HTML (jsfiddle):
<div class="main">
<div class="top">Top</div>
<div class="bottom">Bottom</div>
</div>
To look something like this:
Not like this:
Can you change your HTML layout a little ?
.main {
display: table;
height: 100px;
border: solid 1px;
}
.inner {
display:table-cell;
vertical-align:middle
}
.top, .bottom {background:yellow;}
<div class="main">
<div class="inner">
<div class="top">Top</div>
<div class="bottom">Bottom</div>
</div>
</div>
Check this below.
Just set the display of the parent to table-cell:
.main {
display: table-cell;
height: 100px;
border: solid 1px;
vertical-align: middle;
}
<div class="main">
<div class="top">Top</div>
<div class="bottom">Bottom</div>
</div>
position: relative;
top: 50%;
transform: translateY(-50%);
HTML:
<div class="main">
<div class="wrapper">
<div class="top">Top</div>
<div class="bottom">Bottom</div>
</div>
</div>
CSS:
.main {
display: inline-block;
height: 100px;
border: solid 1px;
line-height: 100px;
vertical-align: middle;
}
.wrapper {
line-height: 1em;
display: inline-block;
vertical-align: middle;
}
DEMO: https://jsfiddle.net/q0kLojwx/5/