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.
Related
How would i align all these 6 divs vertically in a 3x3 pattern so that the top and bottom divs content are aligned with each other so it looks good. i've tried some vertical-align: middle; with no sucess.
It's a must to be 100% responsive and that the number also is centered and aligned so whatever number gets there is aligned.
.top-right-container {
position: absolute;
border: 1px solid white;
height: 20%;
width: 50%;
right: 0;
top: 0;
}
.stats-container {
position: relative;
float: left;
border: 1px solid white;
width: 75%;
height: 80%;
}
.Agility,
.Stamina,
.Respect,
.Intelligence,
.Strength,
.Cash {
display: inline-block;
color: black;
}
.Agility,
.Intelligence {
float: left;
margin-left: 10%;
}
.Stamina,
.Strength {
margin: 0 auto;
}
.Respect,
.Cash {
margin-right: 10%;
float: right;
}
.stats-container h2 {
font-family: Marker-Felt;
margin: 0;
font-size: calc(0.7vh + 1.2vw);
}
.stats-container p {
margin: 5%;
text-align: center;
font-size: calc(0.5vh + 0.8vw);
}
.top-stats,
.bottom-stats {
width: 100%;
text-align: center;
}
<div class="top-right-container">
<div class="stats-container">
<div class="top-stats">
<div class="Agility">
<h2>Agility</h2>
<p>10</p>
</div>
<div class="Stamina">
<h2>Stamina</h2>
<p>10</p>
</div>
<div class="Respect">
<h2>Respect</h2>
<p>10</p>
</div>
</div>
<div class="bottom-stats">
<div class="Intelligence">
<h2>Intelligence</h2>
<p>10</p>
</div>
<div class="Strength">
<h2>Strength</h2>
<p>10</p>
</div>
<div class="Cash">
<h2>Cash</h2>
<p>10</p>
</div>
</div>
</div>
</div>
You can do it with the Flexbox:
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100%}
.stats-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.top-stats,
.bottom-stats {
display: flex;
width: 100%;
text-align: center;
}
.Agility,
.Stamina,
.Respect,
.Intelligence,
.Strength,
.Cash {
flex: 1;
}
.stats-container h2 {
font-size: calc(0.7vh + 1.2vw);
}
.stats-container p {
font-size: calc(0.5vh + 0.8vw);
}
<div class="top-right-container">
<div class="stats-container">
<div class="top-stats">
<div class="Agility">
<h2>Agility</h2>
<p>10</p>
</div>
<div class="Stamina">
<h2>Stamina</h2>
<p>10</p>
</div>
<div class="Respect">
<h2>Respect</h2>
<p>10</p>
</div>
</div>
<div class="bottom-stats">
<div class="Intelligence">
<h2>Intelligence</h2>
<p>10</p>
</div>
<div class="Strength">
<h2>Strength</h2>
<p>10</p>
</div>
<div class="Cash">
<h2>Cash</h2>
<p>10</p>
</div>
</div>
</div>
</div>
responsive 2 rows and 6 boxes
Here is some code you can work with.
The container of all the divs .container will take 100% of the page eg. its <body> .
The rows .statRow will take 100% of its parent the container.
Now the boxes .box will take 33% of its parent width.
Then adding 3 of these boxes 33%+33%+33% will take up 99% of the container.
Additionally borders usually take up more space so width + border is its actual width.
This is fixed with chancing the elements box-sizing to border-box.
.container {
border: 10px solid black;
width: 100%;
box-sizing: border-box;
border-radius: 5px;
}
.statRow {
width: 100%;
display: block;
}
.box {
color: white;
display: inline-block;
text-align: center;
width: 33%;
border: 10px solid white;
box-sizing: border-box;
border-radius: 15px;
background-color: #222;
}
<div class="container">
<div class="statBubble">
<div class="box">
<h5>Agility</h5>
<p>10</p>
</div><!--
--><div class="box">
<h5>Strength</h5>
<p>10</p>
</div><!--
--><div class="box">
<h5>Stat</h5>
<p>number</p>
</div>
</div>
<div class="statRow">
<div class="box">
<h5>Wisdom</h5>
<p>100</p>
</div><!--
--><div class="box">
<h5>Stat</h5>
<p>number</p>
</div><!--
--><div class="box">
<h5>Stat</h5>
<p>number</p>
</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 have a header row where some of the header names are too long to fit on one line and have to be split. The headers are fixed height, sufficient for two lines. The text should be vertically centered.
Something like:
.container {
width: 100%;
height: 40px;
}
.pill {
display: inline-block;
width: 33%;
background-color: red;
text-align: center;
height: 40px;
}
<div class="container">
<div class="pill">
Header One
</div>
<div class="pill split">
Header
<br/>Two
</div>
<div class="pill">
Header Three
</div>
</div>
I can't figure out how to align all those headers correctly. Setting line-height to 40px makes the second header double-height; setting height to 40px throws them out of alignment.
Thanks!
So this is what I changed in your code:
Add vertical-align: middle to align the pills
Give line-height same as height for the pills other than split using the not selector:
.pill:not(.split) {
line-height: 40px;
}
In smaller displays the menu will wrap - so use float and clear them too.
Let me know your thoughts on this, thanks!
.container {
width: 100%;
height: 40px;
}
.pill {
display: inline-block;
vertical-align: middle;
float: left;
width: 33%;
background-color: red;
text-align: center;
height: 40px;
}
.pill:not(.split) {
line-height: 40px;
}
.pill:after{
content: '';
display: block;
clear: both;
}
<div class="container">
<div class="pill">
Header One
</div>
<div class="pill split">
Header
<br/>Two
</div>
<div class="pill">
Header Three
</div>
</div>
Flexbox can do that:
.container {
width: 100%;
height: 40px;
display: flex;
}
.pill {
display: flex;
flex: 0 0 30%;
margin: 0 1%;
justify-content: center;
align-items: center;
text-align: center;
background-color: red;
height: 40px;
}
<div class="container">
<div class="pill">
Header One
</div>
<div class="pill split">
LONG HEADER TEXT GOES HERE
</div>
<div class="pill">
Header Three
</div>
</div>
One option is change the way you are setting the elements side by side, so instead of inline-block:
Table-cell
.container {
width: 100%;
height: 40px;
}
.pill {
padding:10px;
border:1px solid white;
display: table-cell;
width: 33%;
background-color: red;
text-align: center;
height: 40px;
vertical-align:middle;
}
<div class="container">
<div class="pill">
Header One
</div>
<div class="pill">
Header
<br/>Two
</div>
<div class="pill">
Header Three
</div>
</div>
Add the following to your .pill css:
vertical-align:middle;
Here is an example
I have a row of elements, but one of them, which is in the middle, should be centered. Try to run this simple snippet, the "Must be in the middle" thing is not in the middle, but I would like it to be, despite the sizes of things around it. The "text-align:center" won't help, because it puts the entire list of elements in the middle and it's not aware that I want the "the-middle" thing to be in the middle:
.the-whole {
width: 100%;
text-align: center;
}
.side-thing {
display: inline-block;
margin: 8px;
}
.the-center {
display: inline-block;
font-weight: bold;
}
<div class="the-whole">
<div class="side-thing">
long thing at left
</div>
<div class="side-thing">
a
</div>
<div class="side-thing">
b
</div>
<div class="the-center">
(Must be in the Middle)
</div>
<div class="side-thing">
c
</div>
<div class="side-thing">
d
</div>
</div>
If you can change HTML, than you can move left and right elements inside centered one:
.the-whole {
width: 100%;
text-align: center;
}
.side-thing {
display: inline-block;
}
.the-center {
display: inline-block;
position: relative;
margin: 8px;
padding: 0 10px;
}
.the-center span {
font-weight: bold;
}
.left {
position: absolute;
white-space: nowrap;
right: 100%;
top: 0;
}
.right {
position: absolute;
white-space: nowrap;
left: 100%;
top: 0;
}
<div class="the-whole">
<div class="the-center">
<div class="left">
<div class="side-thing">
long thing at left
</div>
<div class="side-thing">
a
</div>
<div class="side-thing">
b
</div>
</div>
<span>(Must be in the Middle)</span>
<div class="right">
<div class="side-thing">
c
</div>
<div class="side-thing">
d
</div>
</div>
</div>
</div>
Solution using display:flex.
.the-whole {
display: flex;
}
.the-whole div {
display: inline;
}
.the-whole > div {
flex: 1;
border: 1px solid green;
}
.the-whole > div.center {
text-align: center;
}
<div class="the-whole">
<div class="left">
<div>
long thing at left
</div>
<div>
a
</div>
<div>
b
</div>
</div>
<div class="center">
<div>
(Must be in the Middle)
</div>
</div>
<div class="right">
<div>
c
</div>
<div>
d
</div>
</div>
</div>
You can use flexbox:
.the-whole {
display: flex;
}
.side {
flex: 1; /* Distribute remaining width equally among the left and right parts */
}
.the-left {
text-align: right;
}
.the-right {
text-align: left;
}
.side-thing {
display: inline-block;
margin: 0 8px;
}
.the-center {
font-weight: bold;
}
<div class="the-whole">
<div class="the-left side">
<div class="side-thing">long thing at left</div>
<div class="side-thing">a</div>
<div class="side-thing">b</div>
</div>
<div class="the-center">(Must be in the Middle)</div>
<div class="the-right side">
<div class="side-thing">c</div>
<div class="side-thing">d</div>
</div>
</div>
I think it's better to insert a new div. So you will have seven. only One in the center.
#page{
width: 100%;
text-align: center;
}
.the-whole {
width: 39%;
display: inline-block;
text-align: center;
}
.side-thing {
min-width: 10%;
display: inline-block;
text-align: center;
margin: 0px;
border: 0.1em solid red;
}
.side-thing-left{
min-width: 40%;
display: inline-block;
text-align: center;
margin: 8px;
border: 0.1em solid red;
}
.the-center {
width: 20%;
display: inline-block;
font-weight: bold;
border: 0.1em solid green;
}
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<id id="page">
<div class="the-whole">
<div class="side-thing-left">left</div>
<div class="side-thing">a</div>
<div class="side-thing">b</div>
</div>
<div class="the-center">(Must be in the Middle)</div>
<div class="the-whole">
<div class="side-thing-left">left</div>
<div class="side-thing">c</div>
<div class="side-thing">d</div>
</div>
</div>
</body>
</html>
Is this a solution?
.the-whole {
width: 100%;
text-align: center;
}
.side-thing {
float: left;
margin: 8px;
}
.the-center {
float: left;
font-weight: bold;
margin: 0 auto;
}
I have a js fiddle where i want a padding between two divs, i have placed a css padding rule on the div that requires padding but it is not being applied:
http://jsfiddle.net/Cnr2V/
css:
.gap {
display: inline-block;
width: 15%;
height: 300px;
float: left;
background-image: url("/images/forward_enabled_hover.png");
background-repeat: no-repeat;
background-position: center center;
}
.feature-addons {
background-color: #303030;
width: 100%;
color: #ffffff;
font-size: 15px;
padding-top: 5px;
padding-bottom: 5px;
}
.feature-container {
display: inline-block;
width: 40%;
float: left;
overflow: hidden;
}
.feature-item {
padding: 5px;
height: 50px;
display: block;
}
.feature-options {
background-color: #f5f5f5;
display: block;
width: 100%;
height: auto;
background-image: url("/images/plus.png");
background-repeat: no-repeat;
background-position: center right;
}
.radio-button {
display: none;
}
html:
<div id="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_UpdatePanel_Features">
<div id="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_Panel_FeatureOptions">
<div class="call-features-table">
<div id="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_Panel_SelectFeatures" class="feature-container">
<div class="feature-addons">Feature add-ons</div>
<label for="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_RadioButton_Item" id="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_Label_FeatureItem">
<div id="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_Panel_FeatureItem" class="feature-item">
<div class="feature-options">
<h4>Title</h4>
<p>lorum ipsum</p>
<p>lorum ipsum</p> <span class="radio-button"><input id="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_RadioButton_Item" type="radio" name="ctl00$ContentPlaceHolder_Content_Wraper$ctl01$RadioButton_Item" value="RadioButton_Item" /></span>
</div>
</div>
</label>
<label for="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_RadioButton_Item" id="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_Label1">
<div id="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_Panel1" class="feature-item">
<div class="feature-options">
<h4>Title</h4>
<p>lorum ipsum</p> <span class="radio-button"><input id="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_RadioButton1" type="radio" name="ctl00$ContentPlaceHolder_Content_Wraper$ctl01$RadioButton1" value="RadioButton1" /></span>
</div>
</div>
</label>
</div>
<div class="gap"></div>
<div id="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_Panel_SelectedFeatures" class="feature-container"></div>
</div>
</div>
How can i create the padding required between two feature-item divs?
Remove height from feature-item div.
.feature-item {
padding: 5px;
display: block;
}
You have defined height for feature-item which is not allowing space between the divs. Try removing the height or specify a higher value.
You are applying feature-item class to a div which is already a block element, Removing height will solve your query, but removing extra css will also improve your code quality. So you just need to write :-
.feature-item {
padding: 5px;
}