This question already has answers here:
CSS center display inline block?
(9 answers)
How can I horizontally center an element?
(133 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 1 year ago.
I would like to center my image slightly above the center of the page while having the text centered directly below it.
HTML
<div class="center">
<img src="aboutImages/jay.jpeg" id="art">
<span class="description">caption</span>
</div>
CSS
div.center{
display: inline-block;
text-align: center;
vertical-align: top;
}
div img{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
height: 320px;
width: 250px;
margin-top: 200px;
}
.description{
display: block;
}
Should be able to handle this with some text-align and some margin-top.
div.center {
margin-top: 25%;
text-align: center;
}
.center img{
max-width: 100%;
max-height: 100%;
height: 320px;
width: 250px;
}
<div class="center">
<img src="aboutImages/jay.jpeg" id="art">
<div class="description">caption</div>
</div>
Just put your image and text inside another container. And you create styling center for that container instead of image.
div.center{
display: inline-block;
text-align: center;
vertical-align: top;
}
.image-box{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
height: 320px;
width: 250px;
margin-top: 200px;
}
div img{
max-width: 100%;
max-height: 100%;
}
.description{
display: block;
}
<div class="center">
<div class="image-box">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" id="art">
<span class="description">caption</span>
</div>
</div>
/* in this example I set the body to 100vh to cover entire screen */
body {
display: flex;
height: 100vh;
}
/* center div using margin auto */
div.center {
display: inline-block;
text-align: center;
margin: auto;
}
/* wrap img and desc. in one div */
.wrap {
display: flex;
flex-direction: column;
}
/* use margin to offset image */
.description {
margin-bottom: 100px;
}
div img {
width: 100px;
}
.description {
display: block;
}
<div class="center">
<div class="wrap">
<img src="https://source.unsplash.com/random/150x150" id="art">
<span class="description">caption</span>
</div>
</div>
Related
I have a page that overflows the viewport both horizontally and vertically, and I'd like to sticky a nav so that it is always at the top and horizontally centered.
Right now, I can get sticky top working, but the centering does not work. Can anyone help?
body {
text-align: center;
}
#header {
background-color: yellow;
width: max-content;
position: sticky;
top: 0;
left: 50%;
translate: -50%
}
#container {
background-color: black;
color: white;
width: 200vw;
height: 200vh;
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
}
<div id="header">
I should always be at the top and centered
</div>
<div id="container">
<span>
I am extremely large and wide
</span>
</div>
CodePen: https://codepen.io/hbchin/pen/bGjpQLJ
After doing some digging I found this:
Why is my element not sticking to the left when using position sticky in css?
Essentially, it's not sticking because the body is automatically expanding to the width of the size of the very big box.
Putting it in an inline-block container will make the width not auto-expand to children, and thus allow sticking behavior.
So this works:
body {
text-align: center;
}
#header {
background-color: yellow;
width: max-content;
position: sticky;
top: 0;
left: 50%;
translate: -50%
}
#container {
background-color: black;
color: white;
width: 200vw;
height: 200vh;
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
}
#whole-thing {
display: inline-block;
}
<div id="whole-thing">
<div id="header">
I should always be at the top and centered
</div>
<div id="container">
<span>
I am extremely large and wide
</span>
</div>
</div>
Unlike position: sticky and vertical positioning, left: 50% isn't a dynamic positioning option; it just sets the initial position. A horizontal scrollbar will still cause it to move, so that it remains "50% from the left edge".
To achieve a fixed left-right position, add a header container with position: fixed around your header, and within that, your header div can get auto margins:
body {
text-align: center;
max-width:100vw;
overflow:scroll;
}
/*added*/
#headercontainer{
position:fixed;
width:100vw;
left:0;
top:0;
}
#header {
background-color: yellow;
width: max-content;
/*left: 50%;*/ /*Removed*/
margin:auto;/*added*/
}
#container {
background-color: black;
color: white;
width: 200vw;
height: 200vh;
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
}
<div id="headercontainer"> <!-- added -->
<div id="header">
I should always be at the top and centered
</div>
</div>
<div id="container">
<span>
I am extremely large and wide
</span>
</div>
You mean something like this?:
<div id="header-container">
<div id="header">
I should always be at the top and centered
</div>
</div>
<div id="container">
<span>
I am extremely large and wide
</span>
</div>
body {
text-align: center;
}
#header-container {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 20px;
overflow: auto;
background-color: yellow;
}
#header {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: max-content;
}
#container {
background-color: black;
color: white;
width: 200vw;
height: 200vh;
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
}
This question already has answers here:
Flexbox column-reverse in Firefox, Edge and IE
(4 answers)
Closed 4 years ago.
This code is designed to show the numbers in column reverse order from 1 to 4 so I suddenly realize I did not like how display flex was setting the .numbers height and it was ignoring my height in 200px in the numbers class name so I added
flex-shrink: 0;
and it prevented display flex from setting it's own height and it suddenly showed the .numbers original height so I was happy :)
so this is how it looks in Chrome
but sadly flex-shrink: 0 gave strange results in Edge, IE and Fire fox I notice in those browsers it removed the scrollbar and it ignored the overflow-y: auto; mentioned in the #numbers-container.
How can I get it to work like the chrome browser in those other browsers that it did not work in ? :(
Code
#container{
background-color: #d6b68d;
height: 500px;
width: 500px;
border-radius: 8px;
position: relative;
}
#numbers-container{
background-color: orange;
height: 90%;
width: 90%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column-reverse;
}
.numbers{
background-color: forestgreen;
display: block;
height: 200px;
width: 100%;
position: relative;
border: 2px solid white;
flex-shrink: 0;
}
.numbers h1{
text-align: center;
color: white;
}
<div id='container'>
<div id='numbers-container'>
<div class='numbers'>
<h1>1</h1>
</div><!--</numbers>-->
<div class='numbers'>
<h1>2</h1>
</div><!--</numbers>-->
<div class='numbers'>
<h1>3</h1>
</div><!--</numbers>-->
<div class='numbers'>
<h1>4</h1>
</div><!--</numbers>-->
</div><!--</numbers-container>-->
</div><!--</container>-->
You could move the scrolling onto it's own container:
/* CSS used here will be applied after bootstrap.css */
#container {
background-color: #d6b68d;
height: 500px;
width: 500px;
border-radius: 8px;
position: relative;
}
#scroll {
height: 90%;
width: 90%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
overflow-y: auto;
}
#numbers-container {
background-color: orange;
overflow-x: hidden;
display: flex;
flex-direction: column-reverse;
}
.numbers {
background-color: forestgreen;
display: block;
height: 200px;
width: 100%;
position: relative;
border: 2px solid white;
flex-shrink: 0;
}
.numbers h1 {
text-align: center;
color: white;
}
<div id="container">
<div id="scroll">
<div id="numbers-container">
<div class="numbers">
<h1>1</h1>
</div>
<!--</numbers>-->
<div class="numbers">
<h1>2</h1>
</div>
<!--</numbers>-->
<div class="numbers">
<h1>3</h1>
</div>
<!--</numbers>-->
<div class="numbers">
<h1>4</h1>
</div>
<!--</numbers>-->
</div>
<!--</numbers-container>-->
</div>
<!--</scroll-container>-->
</div>
<!--</container>-->
However, if you want to start your scroll from the bottom, you would probably need to use js
How can I make all the images the same size while having them still be responsive?
Here's the fiddle:
https://jsfiddle.net/2ko9g725/2/
This is all the css:
.ui.text.menu {
background-color: #eee;
margin-top: 0;
}
.ui.message {
padding: 50px 50px;
margin-bottom: 20px !important;
}
.ui.grid.stackable.container {
display: flex;
flex-wrap: wrap;
}
Check this Demo. It may help you
CSS
img.ui.image{
max-width: 100%;
height: auto;
max-height: 100px;
margin: auto;
display: block;
}
.ui.segment {
width: 100%;
}
Check this fiddle. You can put a wrapper div inside your ui segments for your image to sit in, then give that wrapper a height and width then add object-fit: cover to the img element in css with a width and height of 100%.
body {
margin: 0;
display: flex;
}
.segment {
width: 30%;
border: 1px solid black;
padding: 10px;
margin: 10px;
}
.seg-img {
height: 80%;
width: 100%;
}
img {
object-fit: cover;
height: 100%;
width: 100%;
}
<div class="segment">
<div class="seg-img">
<img src="https://images.unsplash.com/photo-1464061884326-64f6ebd57f83?auto=format&fit=crop&w=1500&q=80">
</div>
<p>TEST</p>
</div>
<div class="segment">
<div class="seg-img">
<img src="https://images.unsplash.com/photo-1440658172029-9d9e5cdc127c?auto=format&fit=crop&w=1652&q=80">
</div>
<p>TEST</p>
</div>
<div class="segment">
<div class="seg-img">
<img src="https://images.unsplash.com/photo-1474015833661-686ed67f9485?auto=format&fit=crop&w=1500&q=80">
</div>
<p>TEST</p>
</div>
i have just updated the fiddle with
images stretch on smaller viewports have been fixed
check this fiddle
i have just changed only in the css
img.ui.image{
overflow: hidden;
width: 100%;
max-width: 50%;
height: auto;
max-height: 100px;
margin: auto;
display: block;
}
This question already has answers here:
Is it possible for flex items to align tightly to the items above them?
(5 answers)
Make a div span two rows in a grid
(2 answers)
Closed 5 years ago.
Using Flexbox I can not seem to make a div wrap to a new line without having it break with previous block content.
I made a codepen to explain:
.container {
left: 0;
right: 0;
margin: auto;
background-color: grey;
width: 800px;
height: 100%;
display: flex;
flex-wrap: wrap;
}
.lightblue {
background-color: lightblue;
width: 300px;
height: 100px;
display: block;
}
.lightpink {
background-color: lightpink;
width: 300px;
height: 50px;
}
.red {
background-color: red;
width: 300px;
height: 50px;
}
body {
margin 0;
width: 100%;
height: 100%;
}
<div class="container">
<div class="lightblue"></div>
<div class="lightpink"></div>
<div class="red"></div>
</div>
What I want is for the red block to display inline, to the right of my lightblue block.
Can you tell me how to achieve this effect?
Thanks!
.container {
left: 0;
right: 0;
margin: auto;
background-color: grey;
width: 800px;
height: 100%;
display: flex;
flex-wrap: wrap;
}
.lightblue {
background-color: lightblue;
width: 300px;
height: 100px;
display: block;
}
.lightpink {
background-color: lightpink;
width: 300px;
height: 50px;
}
.red {
background-color: red;
width: 300px;
height: 50px;
}
body {
margin 0;
width: 100%;
height: 100%;
}
<div class="container">
<div class="lightblue" ></div>
<div>
<div class="lightpink" ></div>
<div class="red" ></div>
</div>
</div>
You just wrap .lightpink, .red in div.
You can achieve this by adding these 3 lines to your container.
flex-direction: column;
max-height: 100px;
align-content: flex-start;
See the fiddle for working example. https://jsfiddle.net/meercha/yn9gtnpc/1/
I can't find an answer that is not on a fixed image size so I'm going to ask it.
I have a div with an image in it and that picture could be any size. I need it to auto scale AND auto align. I can scale it fine but vertically aligning it is a bit of a challenge. I need it to be center vertically aligned.
HTML + CSS
<div id="myDiv">
<img src="./img/example.png"></img>
</div>
#myDiv {
position: absolute;
height: 100%;
width: 100%;
top: 0%;
left: 0%;
text-align: center;
}
#myDiv img {
height: auto;
width: auto;
max-height: 70%;
max-width: 70%
}
This example forces both horizontal and vertical alignment of an image inside a box; in this specific case, constrained to 130x130px. Change the width and height defined as 130px in 2 separate places each in the css to change the constrained size.
[edit: added simplified example showing minimum required setup]
Simplified example:
html:
<div class="pic">
<img src="/path/to/pic.jpg"/>
</div>
css:
.pic {
display: inline-block;
width: 130px;
height: 130px;
outline: solid 1px #cccce3;
font-size: 0;
text-align: center;
}
.pic:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.pic img {
max-width: 130px;
max-height: 130px;
display: inline-block;
vertical-align: middle;
}
Complete example:
Original codepen showing more complex example: http://codepen.io/anon/pen/culvD .
Here's the html:
<ul class="pics">
<li>
<div class="pic">
<img src="/path/to/pic1.jpg"/>
</div>
</li>
<li>
<div class="pic">
<img src="/path/to/pic2.jpg"/>
</div>
</li>
</ul>
and here's the css:
ul.pics {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
ul.pics li {
display: inline-block;
width: 130px;
margin: 4px;
padding: 6px;
background-color: #e6e6ec;
outline: solid 1px #cccce3;
}
ul.pics li .pic {
height: 130px;
font-size: 0;
text-align: center;
}
ul.pics li .pic:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
ul.pics li img {
max-width: 130px;
max-height: 130px;
display: inline-block;
vertical-align: middle;
}
to center align an element to the center asign it a width, then margin-left and right to auto.