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;
}
Related
I have two queries in a single program.
query1:
I am trying to align two sub super sub divisions horizontally inside a sub div of a container div. Below is my code, could you please help me out with this. I have attached the desirable output.
query2:
and from the code you can see inside a circle there is a paragraph day, I wanted it to start from the center of the circle such as if the number of days is 1 it should be shown from the center and when there are 3 digit days it should be adjusted in the center. Hope you understand my queries.
.circle {
height: 50px;
width: 50px;
border-radius: 50%;
padding: 5%;
text-align: center;
border-color: black;
border-style: solid;
}
.container-meta {
position: relative;
}
.container-meta .left {
float: left;
}
.container-meta .right {
float: right;
}
.right p,
.left p {
padding: 0;
margin: 0;
}
<div class="container-meta">
<div class="left">
<div class="circle">
<p>days</p>
<p>hours</p>
</div>
<div class="date">
<p>today-date</p>
<p>tomorrow-date</p>
</div>
</div>
<div class="right">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div>
</div>
current output:
expected output:
You can do this by giving display:flex; to the left class and by giving some margin to one of divs.
.circle {
height: max-content;
width: max-content;
border-radius: 50%;
padding: 5%;
text-align: center;
border-color: black;
border-style: solid;
}
.container-meta {
position: relative;
}
.container-meta .left {
float: left;
display: flex;
}
.container-meta .right {
float: right;
}
.right p,
.left p {
padding: 0;
margin: 0;
width:max-content;
}
.date {
margin-left: 5px;
}
<div class="container-meta">
<div class="left">
<div class="circle">
<p>days</p>
<p>hours</p>
</div>
<div class="date">
<p>today-date</p>
<p>tomorrow-date</p>
</div>
</div>
<div class="right">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div>
</div>
Solution1.
I add display: flex at the .leftand margin-right: 10px at .circle.
.circle {
height: 50px;
width: 50px;
border-radius: 50%;
padding: 5%;
text-align: center;
border-color: black;
border-style: solid;
margin-right: 10px;
}
.container-meta {
position: relative;
}
.container-meta .left {
display: flex;
float: left;
}
.container-meta .right {
float: right;
}
.right p,
.left p {
padding: 0;
margin: 0;
}
<body>
<div class="container-meta">
<div class="left">
<div class="circle">
<p>days</p>
<p>hours</p>
</div>
<div class="date">
<p>today-date</p>
<p>tomorrow-date</p>
</div>
</div>
<div class="right">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div>
</div>
</body>
Solution2.
Using flex instead of float.
.circle {
height: 50px;
width: 50px;
border-radius: 50%;
padding: 5%;
text-align: center;
border-color: black;
border-style: solid;
margin-right: 10px;
}
.container-meta {
display: flex;
align-items: center;
justify-content: space-between;
}
.container-meta .left {
display: flex;
align-items: center;
flex-grow: 1;
}
.right p,
.left p {
padding: 0;
margin: 0;
}
<body>
<div class="container-meta">
<div class="left">
<div class="circle">
<p>days</p>
<p>hours</p>
</div>
<div class="date">
<p>today-date</p>
<p>tomorrow-date</p>
</div>
</div>
<div class="right">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div>
</div>
</body>
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 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 am trying to make a grid of pictures with padding in between inside the main_block div. I cant get the images to aline next to eachother and then break it with a becouse they go inline. inline block does not work. I tried making a new div for these images but i cant resize the pictures nor give them padding. I tried to make the pictures resizable but without results. iut is as if something is overriding the size of the pictures. The pictures stack upon eachother and im trying to maaake a grid.
Thanks in advance for any help!
This would be the optimal solution.
Here is the fiddle
https://jsfiddle.net/q2cr9ttL/1/
<style>
body {
margin: 0;
padding: 0;
}
#header {
background-color: #ff6600;
color: white;
text-align: left;
padding: 2px;
}
#nav {
line-height: 30px;
background-color: #fff000;
height: 350px;
width: 125px;
float: left;
padding: 5px;
}
#section {
width: 350px;
float: left;
padding: 10px;
}
#footer {
background-color: #737373;
color: white;
clear: both;
text-align: center;
}
#container {
margin: auto;
width: 900px;
text-align: left;
overflow: hidden;
}
.inner_block {
display: inline-block;
text-align: center;
width: 350px;
height: 200px;
}
.main_block {
text-align: center;
width: 750px;
}
.grid_block {
display: inline-block;
text-align: center;
width: 29%px;
height:100px;
}
</style>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<body>
<div id="container">
<!---container--->
<div id="header">
<h1>JORDAS</h1>
</div>
<!--header-->
<div id="nav">
Etusivu
<br>
Teltat
<br>
Palvelut
<br>
Yhteistiedot
<br>
</div>
<div id="section">
<div class="main_block">
<div class="grid_block">
<img src=Grafik/basictalt.png>
</div>
<div class="grid_block">
<img src=Grafik/basictalt.png >
</div>
<div class="grid_block">
<img src=Grafik/basictalt.png>
</div>
</div><!--mainblock-->
</div>
<div id="footer">
<h3>POP-UP TELTTOJEN YKKÖNEN </h3>
</div>
<!--footer-->
</div>
<!--container-->
</body>
You could use the flex display property.
You will need to include some prefixes for cross browser compatibility.
* {
box-sizing: border-box;
}
.main_block {
display: flex;
flex-wrap: wrap;
}
.grid_block {
width: 33%;
padding: 1.4em
}
.grid_block img {
max-width: 100%
}
/* ORIGINAL STYLES */
body {
margin: 0;
padding: 0;
}
#header {
background-color: #ff6600;
color: white;
text-align: left;
padding: 2px;
}
#nav {
line-height: 30px;
background-color: #fff000;
height: 350px;
width: 125px;
float: left;
padding: 5px;
}
#section {
width: 350px;
float: left;
padding: 10px;
}
#footer {
background-color: #737373;
color: white;
clear: both;
text-align: center;
}
#container {
margin: auto;
width: 900px;
text-align: left;
overflow: hidden;
}
.inner_block {
display: inline-block;
text-align: center;
width: 350px;
height: 200px;
}
.main_block {
text-align: center;
width: 750px;
}
.grid_block {
display: inline-block;
text-align: center;
width: 29%px;
height: 100px;
}
<div id="container">
<!---container--->
<div id="header">
<h1>JORDAS</h1>
</div>
<!--header-->
<div id="nav">
Etusivu
<br>
Teltat
<br>
Palvelut
<br>
Yhteistiedot
<br>
</div>
<div id="section">
<div class="main_block">
<div class="grid_block">
<img src=http://lorempixel.com/image_output/city-q-c-640-480-9.jpg>
</div>
<div class="grid_block">
<img src=http://lorempixel.com/image_output/city-q-c-640-480-9.jpg >
</div>
<div class="grid_block">
<img src=http://lorempixel.com/image_output/city-q-c-640-480-9.jpg>
</div>
</div><!--mainblock-->
</div>
<div id="footer">
<h3>POP-UP TELTTOJEN YKKÖNEN </h3>
</div>
<!--footer-->
</div>
<!--container-->