I am trying to vertical align a image on my header. That is my actual code, I have it horizontall aligned into center.
header {
background-color: blue;
height: 118px;
width: 1024px;
text-align: center;
}
.container {
margin-left: auto;
margin-right: auto;
width: 1024px;
}
<div class="container">
<header>
<img src="https://i.imgur.com/dKLmNz6.png" alt="JPAD Logo">
</header>
</div>
I tried search for a solution and could get it vertical aligned on center but then cant get it horizontal anymore with text-align:
header {
background-color: blue;
height: 118px;
width: 1024px;
text-align: center;
display: flex;
align-items: center;
}
.container {
margin-left: auto;
margin-right: auto;
width: 1024px;
}
<div class="container">
<header>
<img src="https://i.imgur.com/dKLmNz6.png" alt="JPAD Logo">
</header>
</div>
I am just really starting HTML+CSS. Any suggestions?
Using Flexbox, you can add to your flex element the property justify-content:center
In this css-tricks article you can find a good examples about how to center elements.
header {
background-color: blue;
height: 118px;
width: 1024px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.container {
margin-left: auto;
margin-right: auto;
width: 1024px;
}
<div class="container">
<header>
<img src="https://i.imgur.com/dKLmNz6.png" alt="JPAD Logo">
</header>
</div>
Simply add 'justify-content: center' to your flex container.
header {
background-color: blue;
height: 118px;
width: 1024px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.container{
margin-left:auto;
margin-right:auto;
width: 1024px;
}
img { display:block }
<div class="container">
<header>
<img src="https://i.imgur.com/dKLmNz6.png" alt="JPAD Logo">
</header>
</div>
You have to add justify-content: center; to header.
header {
background-color: blue;
height: 118px;
width: 1024px;
text-align: center;
display: flex;
align-items: center;
}
I hope this will help you.
Related
I have a main container that contains an image and a div. What I want to achieve is to center the div on top of the image without having to use absolute or relative positioning on it. How can I achieve this? Thanks in advance.
.imgCon {
display: flex;
width: 95%;
height: 95%;
margin: auto;
background-color: blue;
}
.imgCon img {
width: 95.5%;
height: 95%;
margin: auto;
border-radius: inherit;
}
.iconCon {
display: flex;
justify-content: center;
align-items: center;
width: 30%;
height: 30%;
margin: auto;
color: #ffffff;
border-radius: 50%;
background-color: #000000;
}
<div class="imgCon">
<!--center this-->
<div class="iconCon">
C
</div>
<img src="https://www.vitalground.org/wp-content/uploads/2021/11/Bart-the-Bear-II--e1637176991443.jpg" />
</div>
The only way I can think of without using absolute positioning or changing your markup is to use a CSS Grid and make both elements occupy the same cell.
.imgCon {
display: flex;
width: 95%;
height: 95%;
margin: auto;
background-color: blue;
display: grid;
}
.imgCon img {
width: 95.5%;
height: 95%;
margin: auto;
border-radius: inherit;
grid-column-start: 1;
grid-row-start: 1;
}
.iconCon {
display: flex;
justify-content: center;
align-items: center;
width: 4rem;
height: 4rem;
margin: auto;
color: #ffffff;
border-radius: 50%;
background-color: #000000;
grid-column-start: 1;
grid-row-start: 1;
}
<div class="imgCon">
<img src="https://www.vitalground.org/wp-content/uploads/2021/11/Bart-the-Bear-II--e1637176991443.jpg" />
<!--center this-->
<div class="iconCon">
C
</div>
</div>
You could use background-image property and tiny styling changes.
.imgCon {
display: flex;
justify-content: center;
align-items: center;
width: 20rem;
height: 20rem;
margin: auto;
background-color: blue;
background-image: url("https://www.vitalground.org/wp-content/uploads/2021/11/Bart-the-Bear-II--e1637176991443.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 80%;
}
.iconCon {
display: flex;
justify-content: center;
align-items: center;
width: 3rem;
height: 3rem;
margin: auto;
color: #ffffff;
border-radius: 50%;
background-color: #000000;
}
.container {
display: flex;
justify-content: center;
align-item: center;
}
<div class="imgCon">
<div class="container">
<!--center this-->
<div class="iconCon">
C
</div>
</div>
</div>
I am creating a resizable textbox that can stretch vertically and horizontally without warping graphical corner elements. To do so, I am using three vertical sections (top, center, bottom) and three horizontal sections (left, middle, right) within the top and bottom vertical sections. This way, the 'top-middle' and 'bottom-middle' sections can stretch horizontally and the center section can stretch vertically & horizontally, while the corner sections (top-left, top-right, bottom-left..) stay the same width and height to avoid warping.
The problem is: positioning elements so that they line up with one another. Specifically, I seem to be getting some cut-off on the right sides of my corner elements.
Here's a screenshot of the issue:
https://postimg.cc/Xp4dRDrQ
Here is the HTML:
<div className='textbox-container'>
<div className='top-block'>
<div className='left-block' />
<div className='middle-block'>
<p>
Top Block
</p>
</div>
<div className='right-block' />
</div>
<div className='center-block'>
<p>
Center Block
</p>
</div>
<div className='bottom-block'>
<div className='left-block' />
<div className='middle-block'>
<p>
Bottom Block
</p>
</div>
<div className='right-block' />
</div>
</div>
And here is the CSS I am using:
.textbox-container {
display: flex;
flex-flow: column;
align-items: center;
width: 75%;
margin: 0 auto;
}
.top-block {
display: inline-flex;
flex-direction: row;
float: left;
width: 100%;
height: 80px;
margin:0 auto;
margin-top: 10vh;
}
.top-block .left-block {
background-image: url('/src/images/Textbox-Top-Left.png');
background-repeat: no-repeat;
background-size: cover;
width: 150px;
height: 80px;
margin:0 auto;
}
.top-block .middle-block {
width: 100%;
height: 80px;
line-height: 80px;
text-align: right;
vertical-align: middle;
background-image: url('/src/images/Textbox-Top-Middle.png');
color: #fff;
margin:0 auto;
}
.top-block .right-block {
float:right;
background-image: url('/src/images/Textbox-Top-Right.png');
background-repeat: no-repeat;
background-size: cover;
width: 150px;
height: 80px;
margin:0 auto;
}
.center-block {
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
width: 100%;
height: 800px;
background-image: url('/src/images/Textbox-Center.png');
background-repeat: repeat-y;
background-size: contain;
margin: 0;
}
.bottom-block {
display: inline-flex;
flex-direction: row;
float: left;
width: 100%;
height: 80px;
margin-bottom: 20vh;
}
/* Close but no cigar with magic numbers in bot sections: */
.bottom-block .left-block {
width: 220px;
height: 80px;
background-image: url('/src/images/Textbox-Bottom-Left.png')
}
.bottom-block .middle-block {
width: 100%;
line-height: 80px;
text-align: right;
padding-right: 5vw;
vertical-align: middle;
height: 80px;
background-image: url('/src/images/Textbox-Bottom-Middle.png');
color: #fff;
margin: none;
}
.bottom-block .right-block {
float:right;
width: 220px;
height: 80px;
background-image: url('/src/images/Textbox-Bottom-Right.png')
}
Fiddle (currently not working):
https://jsfiddle.net/edmundw/6xku4qwa/6/
Fiddle collaborate invite:
https://jsfiddle.net/edmundw/6xku4qwa/4/#&togetherjs=4VMz2rGNAo
Any solutions would be greatly appreciated as I am stumped.
Many thanks for reading this far,
Betty.
Hm, I got something working by using actual img elements (which have an inherent width and height) for the individual sections, along with flexbox (specifically flex-basis, flex-grow and flex-shrink).
The only problem I can see is that the center element's background's borders are blurry. Not sure how to fix that, but other than that, it works. No border cutoff.
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.textbox-container {
width: min-content;
height: auto;
overflow: hidden;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
}
.textbox-vertical-block {
width: 100%;
max-width: 100%;
height: 80px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
}
.textbox-vertical-block>* {
width: auto;
height: 100%;
object-fit: fill;
}
.textbox-vertical-block>*:nth-child(2) {
flex-basis: auto;
flex-grow: 1;
flex-shrink: 0;
}
.textbox-center-block {
height: auto;
align-items: stretch;
background-image: url(https://i.postimg.cc/d3p7Nt38/Textbox-Center.png);
background-size: 100% 100%;
background-repeat: repeat;
}
.textbox-center-block.textbox-vertical-block>* {
height: initial;
}
.textbox-center-block>.textbox-block {
width: 6px;
}
.textbox-center-block>textarea {
width: auto;
height: auto;
flex-basis: auto;
flex-grow: 1;
flex-shrink: 1;
margin: 16px;
padding: 16px;
}
<div class="textbox-container">
<div class="textbox-vertical-block">
<img class="textbox-block" src="https://i.postimg.cc/jDn9G5wH/Textbox-Top-Left.png" />
<img class="textbox-block" src="https://i.postimg.cc/qtfY0Ty9/Textbox-Top-Middle.png" />
<img class="textbox-block" src="https://i.postimg.cc/8FhYz0bs/Textbox-Top-Right.png" />
</div>
<div class="textbox-vertical-block textbox-center-block">
<img class="textbox-block" src="https://i.postimg.cc/xcrz8TS0/Textbox-Center-Right.png" />
<textarea></textarea>
<img class="textbox-block" src="https://i.postimg.cc/xcrz8TS0/Textbox-Center-Right.png" />
</div>
<div class="textbox-vertical-block">
<img class="textbox-block" src="https://i.postimg.cc/kD70BqzC/Textbox-Bottom-Left.png" />
<img class="textbox-block" src="https://i.postimg.cc/CdJW89pq/Textbox-Bottom-Middle.png" />
<img class="textbox-block" src="https://i.postimg.cc/dL1gjnJS/Textbox-Bottom-Right.png" />
</div>
</div>
EDIT #1: Removed the blur by using the same method used in the top and bottom sections (extra border and center images (the center image is 1x1 though, so could be easily replaced by background-color)). More flexbox foolery too
The second div stacks on top of the first div and the first div invisible
How can i position it below the first div
.shop {
width: 100%;
height: 1000px;
background-color: #ffffff;
position: relative;
justify-content: center;
display: flex;
}
.bell {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
<div class="shop"></div>
<div class="bell">
<img src="bell.png" alt="">
</div>
Is this what you are trying to do ? :)
.shop {
width: 100%;
height: 1000px;
background-color: #000;
justify-content: center;
display: flex;
}
.bell {
background-color: red;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
img{
width : 30%;
}
<div class="shop"></div>
<div class="bell">
<img src="https://images.pexels.com/photos/1289845/pexels-photo-1289845.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
</div>
This question already has answers here:
How does the vertical-align property work?
(2 answers)
Closed 2 years ago.
I can't figure this out, it's suposed to put the boxes in the middle of it's container, but I can't make them move.
The idea is to center the inside the wrapper and to place them horizontally in the middle without having to fuzz around with margins or paddings and using veritcal-align.
#wrapper {
width: 1000px;
height: 1000px;
}
#container {
width: 900px;
height: 900px;
text-align: center;
display: inline-block;
background-color: lightblue;
}
.box {
width: 200px;
height: 200px;
margin: 0 auto;
display: inline-block;
vertical-align: middle;
background-color: lightgreen;
border: 1px solid grey;
margin: 10px;
}
<div id="wrapper">
<div id="container">
<div class="box">BOXES</div>
<div class="box">BOXES</div>
<div class="box">BOXES</div>
</div>
</div>
I think you are looking for flexbox.
I have adapted your jsfiddle to fit
https://jsfiddle.net/ke4w58ra/
The folowing code is what I have changed to your #content element.
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
Essentially, setting the elements to display in the center horisontally (align-items) and vertically (justify-content). With a gap of 5px to space the boxes out.
For more information, look here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Below is the integrated form of the JSFiddle
#container{
width: 100vw;
height: 100vh;
text-align: center;
display: inline-block;
background-color: lightblue;
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
}
.box{
width: 200px;
height: 200px;
margin: 0 auto;
background-color: lightgreen;
border: 1px solid grey;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
}
body {
margin: 0px;
}
<body>
<div id="container">
<div class="box">BOXES</div>
<div class="box">BOXES</div>
<div class="box">BOXES</div>
</div>
</body>
how can I make this container responsive so the text and the img automatically become block elements. I tried it out with flex direction but for someway it doesnt work. Can someone correct my code if necessary and suggest me a media query rule for the responsive design
<div class="top">
<h1>Welcome</h1>
<div class="portrait">
<img src="https://pixy.org/images/placeholder.png" alt="">
<h2>XXXXXXXXXX</h2>
</div>
</div>
.top h1{
display: flex;
align-items: center;
justify-content: center;
flex-grow: 1;
background-color: black;
height: 20vw;
margin-top: 0;
font-size: 5vw;
color: white;
text-shadow: 5px 5px rgb(142, 135, 136);
}
.top img {
width: 20vw;
}
thanks in advance
I think this is what you are after. display: flex; is very powerful property and useful when it comes to take up rest of the space and centering.
Modification
here is a demo, I would not suggest this approach with using max-width as it's not "mobile-first". But if this is what you want for this project then ok.
.container {
display: flex;
flex-direction: row;
background-color: deepskyblue;
}
#img {
width: 140px;
height: 140px;
}
#text {
display: flex;
align-items: center;
justify-content: center;
flex-grow: 1;
background-color: deeppink;
min-height: 100px;
}
#media screen and (max-width: 700px) {
.container {
flex-direction: column;
}
#img {
width: 100%;
height: auto;
}
}
.container {
display: flex;
background-color: deepskyblue;
}
#img {
width: 140px;
height: 140px;
}
#text {
display: flex;
align-items: center;
justify-content: center;
flex-grow: 1;
background-color: deeppink;
}
<div class="container">
<img id="img" src="https://www.archlinux.org/static/vector_tux.864e6cdcc23e.png" />
<div id="text">text on the left, next to the img</div>
</div>
Ok, well so here it is if I understood well what you are trying to accomplish. Correct me or update your question if I am wrong!
#img{
width: 200px;
height: 150px;
float: left;
}
#text{
overflow: hidden;
}
<div class="container">
<img id="img" src="https://www.archlinux.org/static/vector_tux.864e6cdcc23e.png"/>
<div id="text">text on the left, next to the img</div>
</div>