CodePen
I want to align the both vertically and horizontally, the height and width of the container will be fixed regarding other extenal factors.
How do i do that?
I've tried using flex
display: flex;
justify-content: center;
flex-direction: column;
but it gets rid of my horizontal alignment
Actually, there are multiple ways to achieve vertical alignment, here is one:
div {
width: 300px;
height: 150px;
background-color: #ddd;
text-align: center;
font-size: 0;
}
div::before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
a {
width: 100px;
height:50px;
background-color: #ff0000;
display: inline-block;
vertical-align: middle;
font-size: 16px
}
<div>
Some Text
</div>
Found the solution!
On the div parent:
position:relative;
On the a child:
position: absolute;
top: 50%;
left: 50%;
margin-left: -half_its_width;
margin-top: -half_his_height;
Related
Need to center this text in this way:
Basically, the top part to the left and the bottom part to the right, but with a bit of overlap.
How can I do that in HTML/CSS?
You can center the text vertically by using the centering with transform technique. Then the text should be separated into two lines and aligned to left/right plus a small negative margin so it overflows outside of the circle.
div {
height: 130px;
width: 130px;
background: lightblue;
position: relative;
border-radius: 50%;
}
p {
position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0;
width: 100%;
}
span {
display: block;
}
span:first-of-type {
text-align: left;
margin-left: -7px;
}
span:last-of-type {
text-align: right;
margin-right: -7px;
}
<div>
<p>
<span>La crèativitè</span>
<span>est contagieuse</span>
</p>
</div>
Simply use 2 elements for those 2 lines and add a margin-left to the second element:
.logo p {
margin: 0;
}
.logo p:nth-of-type(2) {
margin-left: 3.5em;
}
/* for demonstration purpose only */
html {
font-size: 40px;
font-family: Arial;
}
<div class="logo">
<p>La crèativitè</p>
<p>est contagieuse</p>
</div>
Another entirely different (and more complicated) approach is to use flex-box. It requires you to use containers and to know the principles of flex-box. But once you know what you're doing, it becomes fairly simple to center things inside of other things.
If you need somewhere to practice flex-box with simple games, you can visit https://flexboxfroggy.com/.
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: gray;
}
.logo {
width: 200px;
height: 200px;
background-color: maroon;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
p {
font-size: 20px;
}
#p1 {
align-self: flex-start;
}
#p2 {
align-self: flex-end;
}
<div class="container">
<div class="logo">
<p id="p1">La crèativitè</p>
<p id="p2"> est contagieuse</p>
</div>
</div>
Bonne Chance!
I have a <div> that contains three <div>s.
In each of those <div> elements is a <p> element with text and 2 nested elements to make a radial progress bar. What I need is to put the text in the middle of the circles, and do it responsively using pure CSS. I need something like this:
The code has flaws, like that <p> inside of a <span> but I am fixing it in the new version with the help you guys provide.
.radius-container div {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.radius-container div:first-child {
margin-right: 1%;
}
.radius {
padding-top: 11em;
height: 30em;
text-align: center;
border: 1px solid #858280;
display: block;
border-radius: 50%;
width: 100%;
}
.radius3 {
position: relative;
padding-top: 10%;
height: 15em;
width: 50%;
text-align: center;
border: 1px solid #858280;
border-left: 0;
border-bottom: 0;
border-top-right-radius: 100%;
display: block;
margin-left: 15em;
}
.radius3 p {
position: absolute;
right: 50%;
top: 65%;
}
<div class="radius-container">
<div><span class="radius"><p>SERBIAN<br>100%</p></span></div>
<div><span class="radius"><p>ENGLISH<br>100%</p></span></div>
<div><span class="radius3"><p>GERMAN<br>25%</p></span></div>
</div>
See also this jsFiddle
After researching for long time for this issue, I found an generic solution which solves this kind of requeriments. I am proud of it, simple and elegant :)
.center-element{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Hoping it helps, any doubt let me know. Cheers mate :)
This code might help you.
.innerDiv {
height: 100px;
width: 100px;
display: table-cell;
text-align: center;
vertical-align: middle;
border-radius: 50%;
}
You can make a div with a border-radius to 50%. After, you can use the flex display to center verticaly and horizontaly.
html
div {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
div div {
display: inline-flex;
flex-direction: column;
width: 31%;
margin: 1%;
border-radius: 50%;
border: 1px solid #999;
align-items: center;
justify-content: center;
}
div div span {
text-align: center;
color: #999;
}
<div>
<div><span>Serbian</span><span>100%</span>
</div>
<div><span>Serbian</span><span>50%</span>
</div>
<div><span>Serbian</span><span>25%</span>
</div>
</div>
I'm trying to center align a div that is located within another div. I want to vertically center the "options" div that is located inside the "plan-container"
Thanks in advance.
.plan-container {
width: 960px;
height: auto;
margin-top: 62px;
overflow: hidden;
background-color: red;
}
.options {
float: left;
width: 151px;
height: 100px;
background-color: green;
}
.plan {
float: left;
width: 220px;
height: 600px;
margin-left: 23px;
background-color: purple;
}
.plan:last-child {
float: right;
}
.plan-featured{
width: 300px;
height: 600px;
background-color: purple;
}
<div class="plan-container">
<div class="options">Options</div>
<div class="plan">Box one</div>
<div class="plan plan-featured">Box two</div>
<div class="plan">Box three</div>
</div>
Vucko's answer is correct. I wanted to add a comment, but since I don't have enough reputation yet, I'll just post it as an answer.
You can use the vertical-align property on the inner div that needs centering. This property only works on elements that have display:inline-block or display:table. Refer to the actual spec here.
Repeating Vucko's answer:
.options {
display: inline-block;
vertical-align: middle;
}
You can use inline-block instead of float, and than you can use the vertical-align property:
.plan-container>div{
display: inline-block;
vertical-align: middle;
}
JSFiddle
However, beware of the whitespace issue.
Try it-
.plan-container {
display: flex;
flex-wrap: wrap; /* optional. only if you want the items to wrap */
justify-content: center; /* for horizontal alignment */
align-items: center; /* for vertical alignment */
}
I'm trying to use the table-cell way to center a div vertically and horizontally.
It works when I use the following code:
div {
display: table;
}
.logo {
display: table-cell;
position: absolute;
vertical-align: middle;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
But I'd rather wrap .logo in another div called .center like here JSFiddle, but for some reason, although it works in JSFiddle, it isn't working for me on my site.
Here is a good starting point.
HTML:
<div class="containing-table">
<div class="centre-align">
<div class="content"></div>
</div>
</div>
CSS:
.containing-table {
display: table;
width: 100%;
height: 400px; /* for demo only */
border: 1px dotted blue;
}
.centre-align {
padding: 10px;
border: 1px dashed gray;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.content {
width: 50px;
height: 50px;
background-color: red;
display: inline-block;
vertical-align: top; /* Removes the extra white space below the baseline */
}
See demo at: http://jsfiddle.net/audetwebdesign/jSVyY/
.containing-table establishes the width and height context for .centre-align (the table-cell).
You can apply text-align and vertical-align to alter .centre-align as needed.
Note that .content needs to use display: inline-block if it is to be centered horizontally using the text-align property.
This would be easier to do with flexbox. Using flexbox will let you not to specify the height of your content and can adjust automatically on the height it contains.
DEMO
here's the gist of the demo
.container{
display: flex;
height: 100%;
justify-content: center;
align-items: center;
}
html
<div class="container">
<div class='content'> //you can size this anyway you want
put anything you want here,
</div>
</div>
I have a header on my site, and this has a container and three divs.
The heading container is 100px high.
The first div floats to the left and has a width of 150px
The second div floats to the right and has a width of 150px
The third div has another div inside it, and by default resizes to fill the remaining space.
I want the third div to center vertically. When I add display: table-cell and vertical-align: middle the div shrinks to the size of the text. I can only resize the div using a fixed size.
<div id="#headingcontainer">
<div class="leftimg">Left</div>
<div class="rightimg">Right</div>
<div class="heading">Content to be centered horizontally and vertically</div>
</div>
#headingcontainer
{
border: none;
border-bottom: 2px solid #8c8cd4;
width: 100%;
height: 100px;
text-align: center;
background-color: #000;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
div.heading
{
display: table-cell;
vertical-align: middle;
height: 100px;
text-align: center;
width: auto;
}
div.leftimg
{
width: 150px;
float: left;
}
div.rightimg
{
width: 150px;
float: right;
}
Can anyone let me know how I can center the middle div without knowing the exact width?
If I take out the display: table-cell from the heading class it is no longer centered vertically but is horizontally.
I think this might be what you're looking for... I changed div.header in the css to have padding on top, removed the table-cell and also set the margin to auto instead of width auto. See if this is what you were hoping for. You will have to adjust the padding on top depending on the spacing but this seems like the easiest way to me.
#headingcontainer
{
border: none;
border-bottom: 2px solid #8c8cd4;
width: 100%;
height: 100px;
text-align: center;
background-color: #000;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
div.heading
{
height: 100px;
text-align: center;
margin: auto;
padding-top:40px;
}
div.leftimg
{
width: 150px;
float: left;
}
div.rightimg
{
width: 150px;
float: right;
}
<div id="headingcontainer">
<div class="leftimg">Left</div>
<div class="rightimg">Right</div>
<div class="heading">Content to be centered horizontally and vertically</div>
</div>
I have now found an answer that works for me.
First a small change to the HTML (two extra divs in the heading):
<div id="#headingcontainer">
<div class="leftimg">Left</div>
<div class="rightimg">Right</div>
<div class="heading"><div><div>Content to be centered horizontally and vertically<div></div></div>
</div>
Then change to the CSS:
#headingcontainer
{
border: none;
border-bottom: 2px solid #8c8cd4;
background-color: #000;
margin-bottom: 10px;
width: 100%;
height: 100px;
}
div.heading
{
display: table;
border-collapse: collapse;
width: 100%;
height: 100px;
position: absolute;
}
div.heading div
{
display: table-row;
}
div.heading div div
{
display: table-cell;
text-align: center;
vertical-align: middle;
}
This allows the final div contain the text to be both centered vertically and also horizontally. The help came from another Stack Overflow question I found after more searching - 818725.
try this http://jsfiddle.net/KtgVN/20/