I tried using the flexbox method, table method, and some other methods for vertically centering a div of unknown height, but my div is not getting centered correctly. I want the width of the centered div to be 50% of the window width or have a min-width of 200px.
.content {
background-color: violet;
min-width: 200px;
width: 50%;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 1px 7px 1px rgba(0, 0, 0, 1);
}
.outer-container {
display: table;
width: 100%;
background-color: violet;
}
.container {
display: table-cell;
text-align: center;
vertical-align: middle;
}
<body>
<div class="outer-container">
<div class="container">
<div class="content">
<div class="title-class">
Hello there
</div>
</div>
</div>
</div>
</body>
Using a flexbox, here's all the code you need:
HTML
<div class="container">
<div class="content">
<div class="title-class">Hello there</div>
</div>
</div>
CSS
html, body { height: 100%; }
.container {
display: flex;
justify-content: center;
align-items: center;
background-color: violet;
height: 100%;
}
.content {
background-color: violet;
width: 50%;
text-align: center;
box-shadow: 0px 1px 7px 1px rgba(0, 0, 0, 1);
}
DEMO
As an alternative, here's the table method:
How to Center Elements Vertically, Horizontally or Both
Related
why when giving a display: flex and a justify-content: center, the child items don't all appear in the parent div?
I have 15 child divs
HTML
<div class="container">
<div class="dv">1</div>
<div class="dv">2</div>
<div class="dv">3</div>
<div class="dv">4</div>
<div class="dv">5</div>
<div class="dv">6</div>
<div class="dv">7</div>
<div class="dv">8</div>
<div class="dv">9</div>
<div class="dv">10</div>
<div class="dv">11</div>
<div class="dv">12</div>
<div class="dv">13</div>
<div class="dv">14</div>
<div class="dv">15</div>
</div>
when giving a justify-content: center the divs at the beginning of the list disappear
css
.container{
display: flex;
align-items: center;
justify-content: center;
height: 90%;
overflow: auto;
white-space: pre-line;
border: 10px solid rgb(70, 70, 199);
width: 500px;
height: 500px;
background-color: blue;
}
.dv{
margin: 19px;
padding: 10px;
height: 90%;
background-color: white;
border: solid 1px black;
border-radius: 10px;
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
color: black;
width: 500px;
height: 400px;
}
Apparently the total width of the child dvs should not exceed that of the containing parent, and in order to handle such cases we use the flex-wrap property
I am struggling to make my .centerIt divs be centered vertically, and to have the .div1 stay scrollable after I add more .centerIt divs into the column.
The .centerIt divs have to keep their height: 20px and not squeeze after I add more of them.
JSFiddle example
.container {
display: flex;
background: red;
width: 300px;
height: 300px;
}
.div1 {
background: yellow;
height: 90%;
width: 27%;
margin: 5px;
overflow-y: scroll;
}
.div2 {
background: blue;
height: 90%;
width: 74%;
margin: 5px;
}
.centerIt {
background: green;
width: 100%;
border: solid 1px black;
height: 20px;
color: green;
}
<div class="container">
<div class="div1">
<div class="centerIt"></div>
<div class="centerIt"></div>
<div class="centerIt"></div>
<div class="centerIt"></div>
<div class="centerIt"></div>
<div class="centerIt"></div>
<div class="centerIt"></div>
<div class="centerIt"></div>
</div>
<div class="div2"></div>
</div>
Just try to add min-height: 20px to .centerIt instead of height and
display: flex;
flex-direction: column;
justify-content: center;
to .div1 styles, should do it.
JSFiddle fork
I would like to have one image on the left and two on the right stacked on top of one another. As the footprint shrinks, horizontally, I would like the images to become small too, maintaining their aspect ratios. When I currently do it the images maintain their same size and are pushed off the left side of the page.
I am using bootstrap 3.* right now. But I would be curious to know how to do it with flexbox.
codepen
* {
box-sizing: border-box;
}
.content {
background-color: rgba(0, 0, 0, 0.3);
padding: 10px;
}
.row {
display: flex;
flex-flow: column wrap-reverse;
justify-content: center;
align-items: center;
max-width: 600px;
height: 40px;
background-color: rgba(0, 0, 0, .2);
}
.cell {
text-align: center;
display: flex;
align-items: center;
min-height: 50%;
padding-top: 5px;
padding-bottom: 5px;
}
.ordered3 {
order: 3;
flex: 2;
padding-right: 10px;
border-right: rgba(0, 0, 0, 0.3) solid 3px;
}
.ordered2 {
order: 2;
flex: 1;
}
.ordered1 {
order: 1;
flex: 1;
}
img {
margin: auto;
width: 100%;
max-width: 300px;
max-height: 100%
}
<div class="content">
<div class="row">
<div class="cell ordered3">
<img src="http://lorempixel.com/output/nature-q-c-260-44-8.jpg" />
</div>
<div class="cell ordered2">
<img src="http://lorempixel.com/output/city-q-c-260-24-3.jpg" />
</div>
<div class="cell ordered1">
<img src="http://lorempixel.com/output/abstract-q-c-310-37-1.jpg" />
</div>
</div>
</div>
Check my codeopen. If it's not what you want, please clarify your issue.
* {
box-sizing: border-box;
}
.content {
background-color: #f9f9f9;
border: 1px solid #ececec;
padding: 10px;
}
.row {
display: flex;
align-items: center;
}
.cell {
padding-top: 5px;
padding-bottom: 5px;
}
img {
width: 100%;
display: block;
max-width: 300px;
}
<div class="content">
<div class="row">
<div class="cell">
<img src="http://lorempixel.com/output/nature-q-c-260-44-8.jpg"/>
</div>
<div class="cell">
<img src="http://lorempixel.com/output/city-q-c-260-24-3.jpg"/>
<img src="http://lorempixel.com/output/abstract-q-c-310-37-1.jpg"/>
</div>
<div class="cell">
<img src="http://lorempixel.com/output/nature-q-c-260-44-8.jpg"/>
</div>
<div class="cell">
<img src="http://lorempixel.com/output/city-q-c-260-24-3.jpg"/>
<img src="http://lorempixel.com/output/abstract-q-c-310-37-1.jpg"/>
</div>
</div>
</div>
I'm trying to align an image in the center of the page while also aligning some text to the right of the image. How would I do this in either css or html?
Here is my current attempt at this:
.center-img {
display: inline-block;
margin: 0 auto;
}
.center-txt {
display: inline-block;
}
<img src="http://placehold.it/350x150" class="center-img"/>
<div class="center-txt">
<h1>Home</h1>
</div>
Right now the image is not centered and the text is not centered vertically with the image
Here is a visual representation of what I would like it to look like in the end:
Solution 1:
You can use a div to wrap the image and the text in and use text-align: center along with vertical-align: middle.
.center-img,
.center-txt {
display: inline-block;
vertical-align: middle;
}
#wrapper {
text-align: center;
border: 1px solid red;
}
<div id="wrapper">
<img src="http://placehold.it/100x100" class="center-img" />
<div class="center-txt">
<h1>Home</h1>
</div>
</div>
Solution 2:
Alternatively, you can use a div to wrap the image and the text in and use flexbox. Use justify-content to center your elements horizontally and align-items: center to align them vertically.
.center-img,
.center-txt {
display: inline-block;
}
#wrapper {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
}
<div id="wrapper">
<img src="http://placehold.it/100x100" class="center-img" />
<div class="center-txt">
<h1>Home</h1>
</div>
</div>
Now to center the above wrapper to the middle of the screen you can use:
#wrapper {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Example:
.center-img,
.center-txt {
display: inline-block;
}
#wrapper {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="wrapper">
<img src="http://placehold.it/100x100" class="center-img" />
<div class="center-txt">
<h1>Home</h1>
</div>
</div>
We have a wrapper - div. Div have size 100% width and height of viewport. I give background to div pics and linear-gradient for darken. Div is a flex-block. Inner content aligned to center with justify-content (horizontal) and align-items (vertical). Its all.
ps: Sorry, sorry. Not its all. We go to drink a beer with this ladies. :)))
* {
padding: 0;
margin: 0;
}
div {
background-image: linear-gradient(rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .8) 100%), url("http://beerhold.it/600/400");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
img {
margin-right: 1em;
}
<div class="wrapper">
<img src="http://beerhold.it/100/100">
<p>Lorem ipsum</p>
</div>
To center the image use
img.center{
display:block;
margin:0 auto;
}
wrap both image and text inside a container and add display:flex to it.
then, to center them use align-items: center; and justify-content: center;
see below snippet. let me know if it works for you
for more info about how to center vertically see here -> Vertical Centering with Flexbox
.center-img {
display: inline-block;
margin: 0 auto;
}
.center-txt {
display: inline-block;
}
.container {
width:500px;
height:500px;
border:2px solid red;
display: flex;
align-items: center;
justify-content: center;padding:0 15px;}
<div class="container">
<img src="http://placehold.it/350x150" class="center-img"/>
<div class="center-txt">
<h1>Home</h1>
</div>
</div>
Just add vertical-align: middle; to class center-img
The vertical-align property sets the vertical alignment of an element.
Using middle place it in the middle of the parent element
.center-img {
display: inline-block;
margin: 0 auto;
vertical-align: middle;
}
.center-txt {
display: inline-block;
}
<img src="http://placehold.it/350x150" class="center-img"/>
<div class="center-txt">
<h1>Home</h1>
</div>
Use this-
<div>
<img style="vertical-align:middle" src="https://placehold.it/60x60">
<span style="">Right Vertical aligned text</span>
</div>
Refer to this link.
<div class="container">
<img src="img.jpg"/>
<div class="text">
text
</div>
</div>
.container{
text-align:center;
}
img, .text{
display:inline-block;
}
Like this: https://jsfiddle.net/jn4rktaa/
HTML:
<div class="outside">
<div class="inside">
<img src='/img/file.jpg' class="img" />
Test Text
</div>
</div>
CSS:
.outside {
width: 800px;
height: 600px;
border: 1px solid red;
position: relative;
}
.inside {
position: relative;
width: 200px;
height: 200px;
border: 1px solid blue;
margin: 0 auto;
top: calc(50% - 100px); /* THE VALUE (100PX) SHOULD BE HALF OF YOUR ELEMENT'S HEIGHT */
}
.img {
float: left;
}
I have a design using some bootstrap styling which has a white column on the right. The height should be 100%, but it isn't rendering at 100%. It renders at 100% of the initial screen height, but when you scroll down it's no longer white.
I've looked at several other CSS solutions on this site. I've tried making all parent elements 100% height. I've tried making it a flexbox column. I've tried putting "position: relative;" in the body. Nothing has worked yet. I'd prefer not to use JS to achieve this.
Simplified version of my HTML:
<body>
<div class="container">
<div class="main">
<h1>This is the main content area</h1>
</div>
<div class="right pull-right">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
</div>
</body>
The CSS:
body,html {
height: 100%;
background-color: #aaa;
}
body {
position: relative;
}
.main {
display: inline-block;
}
.container {
height: 100%;
}
.right {
display: inline-flex;
flex-direction: column;
background-color: #fff;
width: 350px;
height: 100%;
min-height: 100%;
border: 1px solid #E1E6E9;
margin-right: 100px;
position: absolute;
right: 100px;
}
.content {
height: 300px;
min-height: 300px;
margin: 10px 10px;
background-color: #ccc;
border: 1px solid #000;
}
Change your .right class to have height: auto;
It will size itself to fit with its content.
.right {
display: inline-flex;
flex-direction: column;
background-color: #fff;
width: 350px;
height: auto;
min-height: 100%;
border: 1px solid #E1E6E9;
margin-right: 100px;
position: absolute;
right: 100px;
}
http://codepen.io/smlariviere/pen/WrWgxQ