This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 1 year ago.
I'm trying to mimic a website. I'm using flex for my divs, but they are not properly aligning.
What mine looks like: https://i.imgur.com/4k5ln1T.png
What I want it to look like: https://i.imgur.com/Wl6DY1t.png
My Code:
<div class="div1">
<img src="https://i.imgur.com/AbZMoEL.png" class="image" alt="cookie picture">
<p class=""> cookies are great! </p>
<a class="modulbutton" href="#open1">Open modal link</a>
<div class="div1">
<img src="https://i.imgur.com/kdOyxwV.png" class="image" alt="icecream picture">
<p class=""> Ice cream is great! </p>
<a class="modulbutton" href="#open1">Open modal link</a>
<div id="open1" class="modalwindow">
<div class="msgblock">
<h1>Heading</h1>
<p>some text</p>
<img src="2.jpg" alt="missing">
<div class=""> Close</div>
</div>
</div>
</body>
<footer>
<style>
.div1 {
width: 900px;
height: 400px;
border: 3px solid blue;
display: flex;
align-items: center;
}
.modulbutton{
background-color: green;
color: white;
padding: 3%;
text-decoration: none;
}
Any help would be greatly appreciated, I can't seem to align the description text and modal button properly on the bottom of the image.
Thanks!
what you need to do is put the p tag and a tag in a div under div1 then use flex direction in css on your div 1
<div class="div1">
<img src="https://i.imgur.com/AbZMoEL.png" class="image" alt="cookie picture">
<div> <p class="indent"> cookies are great! </p>
<a class="modulbutton" href="#open1">Open modal link</a>
</div>
</div>
.div1 {
width: 900px;
height: 400px;
border: 3px solid blue;
margin: 10px;
display: flex;
flex-direction: column;
align-items: center;
}
Related
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 7 months ago.
How can I vertically center the button?
Image of a problem
I started to learn HTML&CSS and I don't know how can I align the button to vertical center of a div in a proper way.
None of text-align:center etc. doesn't work for me.
Second question: How can I make the outer one div same height as a middle-div?
p {
font-family: Roboto, Arial;
margin-top: 0;
margin-bottom: 0;
}
.user {
font-weight: 500;
}
.photo {
width: 46px;
border-radius: 28px;
}
.user-name,
.user-description,
.status {
width: 150px;
}
.avatar,
.middle-div,
.follow {
display: inline-block;
}
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;500;700&display=swap" rel="stylesheet">
<div>
<div class="avatar">
<img class="photo" src="av1.jpg">
</div>
<div class="middle-div">
<div>
<div class="user-name">
<p class="user">
oliver
</p>
</div>
<div class="user-description">
<p class="user-desc">
the cat
</p>
</div>
<div class="status">
<p class="status-desc">
Popular
</p>
</div>
</div>
</div>
<div class="follow">
<button class="follow-button">Follow</button>
</div>
</div>
I have edited your code with the changes. I added the card class on the card and made it a flexbox by adding the following display: flex;
and align-items: center;.
p {
font-family: Roboto, Arial;
margin-top: 0;
margin-bottom: 0;
}
.user {
font-weight: 500;
}
.photo {
width: 46px;
border-radius: 28px;
}
.user-name,
.user-description,
.status {
width: 150px;
}
.card {
display: flex;
align-items: center;
}
<div class="card">
<div class="avatar">
<img class="photo" src="av1.jpg">
</div>
<div class="middle-div">
<div>
<div class="user-name">
<p class="user">
oliver
</p>
</div>
<div class="user-description">
<p class="user-desc">
the cat
</p>
</div>
<div class="status">
<p class="status-desc">
Popular
</p>
</div>
</div>
</div>
<div class="follow">
<button class="follow-button">Follow</button>
</div>
</div>
I try to center pictures in the container. I've set left and right margin to 0 and still something is not working right.
#navbut {
width: 100%;
background: red;
margin: -7px 0 0 0;
color: white;
}
.container .box {
display: inline-block;
width: 10%;
margin-left: auto;
margin-right: auto;
}
.box img.Newspaper_pic {
width: 50%;
margin-left: auto;
margin-right: auto;
}
<section id="navbut">
<div class="container">
<div class="box">
<img src="http://placehold.it/100x100" alt="News-pic" class="Newspaper_pic">
</div>
<div class="box">
<img src="http://placehold.it/100x100" alt="News-pic" class="Newspaper_pic">
</div>
<div class="box">
<img src="http://placehold.it/100x100" alt="News-pic" class="Newspaper_pic">
</div>
</div>
</section>
What I am doing wrong that I cannot center pictures in one line?
If your images are set to inline-block, you have to use
text-align:center;
. If your images are set to block,
margin: 0 auto;
will work.
Looks like your pictures are centered, but only within the .box divs, you have to center those .box divs in the .container aswell. The .container also needs to be width 100% so it spans over the whole #navbut.
Try to use flex. flex is very easy to make for these kind of layouts because of these alignment properties.
Reference Link flex
Stack Snippet
body {
margin: 0;
}
.container, .box {
display: flex;
justify-content: center;
}
.Newspaper_pic {
display: block;
max-width: 100%;
}
<section id="navbut">
<div class="container">
<div class="box">
<img src="http://lorempixel.com/400/200/sports" alt="News-pic" class="Newspaper_pic">
</div>
<div class="box">
<img src="http://lorempixel.com/400/200/sports" alt="News-pic" class="Newspaper_pic">
</div>
<div class="box">
<img src="http://lorempixel.com/400/200/sports" alt="News-pic" class="Newspaper_pic">
</div>
</div>
</section>
Put whatever you want inside the center tags, e.g:
<center>
<img src="" alt="">
</center>
I'm slowly getting into CSS and HTML and so far I've been making a page where there's a navbar on top and a list of elements below it. The elements in said list change their shape, too, but this is not the purpose of my question.
The issue I'm having is that while scrolling, the container class elements just scroll on top of the navbar, making it kinda pointless.
header {
position: fixed;
display: flex;
left: 0;
right: 0;
top: 0;
margin: 0;
background: red;
}
main {
margin: 0 auto;
padding-top: 80px;
background: yellow;
}
.container {
margin: 10px;
display: flex;
border: 1px solid #aaa;
height: 200px;
min-width: 700px;
flex-grow: 1;
position: relative;
}
.container div.containerinfo {
display: flex;
flex-wrap: wrap;
flex: 0.75;
flex-direction: column;
background-color: white;
}
<header>
<h1 id="title">Navbar</h1>
</header>
<main>
<section>
<div class="container">
<img src="broken" alt="broken link">
<div class="containerinfo">
</div>
</div>
<div class="container">
<img src="broken" alt="broken link">
<div class="containerinfo">
</div>
</div>
<div class="container">
<img src="broken" alt="broken link">
<div class="containerinfo">
</div>
</div>
<div class="container">
<img src="broken" alt="broken link">
<div class="containerinfo">
</div>
</div>
<div class="container">
<img src="broken" alt="broken link">
<div class="containerinfo">
</div>
</div>
</section>
</main>
Here's a jsfiddle: https://jsfiddle.net/ckuuxqqr/6/
Any help would be appreciated.
Because your header comes first in the source code, the yellow div elements will layer above it on the z-axis.
Here are two options to make header appear on top:
Add z-index: 1 to header. This will move the header to the top of other elements without a higher z-index value. (The default value for all elements is auto.) revised fiddle
Put the header element last in the source code. revised fiddle
You will need to add z-index:1; to your header css. z index will determine the "stacking" of elements on the page. The higher the index the higher it will stack on the page.
Add the z-index and here's why-->https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
I have the following HTML structure currently:
<div id="image" style="margin: 20px;">
<h5>
<span>DriverName1</span>
<span>DriverName2</span>
</h5>
<img src=/>
<img src= />
</div>
I am trying to make the images appear side by side which they are doing, but the headers for drivername1 and drivername2 are appearing right next to each other over the same image. How do I make these spans match up with the top left edge of each image? I tried adding separate headers over each image but that makes the images go vertically one on top of the other then.
you can consider using display:flex for this
check the following snippet
div{
display:flex;
}
.image {
display: flex;
flex-direction: column;
border:1px solid;
margin-left:10px;
}
img {
width: 100px;
height: 100px;
}
<div id="image" style="margin: 20px;">
<section class="image">
<header>DriverName1</header>
<img src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg">
</section>
<section class="image">
<header>DriverName2</header>
<img src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg" width=25px height=25px>
</section>
</div>
Non-flex solution
div * {
display: inline-block;
}
.image {
border: 1px solid;
margin-left: 10px;
}
img {
width: 100px;
height: 100px;
display: table-cell;
}
header {}
<div id="image" style="margin: 20px;">
<section class="image">
<header>DriverName1</header>
<img src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg">
</section>
<section class="image">
<header>DriverName2</header>
<img src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg" width=25px height=25px>
</section>
</div>
Hope this helps
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 6 years ago.
There is some space between #child divs. How can I make them stack perfectly without any gaps? There is no problem when I don't have the <img> in there. Also, there is a blue stripe under the image, which is part of the div, but I don't understand why it's showing.
I am not an expert on HTML or CSS. I am a beginner who is starting to pick it up for marketing reasons. Any help and/or advice is highly appreciated it!
#parent {
max-width: 850px;
margin: 0 auto;
border: 10px solid black;
}
#child {
background-color: blue;
text-align: center;
color: #eee;
font-size: 56px;
}
img {
width: 100%;
}
<div id="parent">
<div id="child">
<img src="http://s3.amazonaws.com/letsrumbl-marketing/images/8c146690-f04b-4e60-89ca-5e2d979f5a16/HowToShare3.png" />
</div>
<div id="child">
<p>Div 2</p>
</div>
<div id="child">
<p>Div 3</p>
</div>
<div id="child">
<p>Div 4</p>
</div>
</div>
Here is an image of my problem.
http://imgur.com/a/sqdpB
Paragraphs have a margin by default, so just remove that. And to get rid of the line below the image, add vertical-align:top to your img rules:
#parent {
max-width: 850px;
margin: 0 auto;
border: 10px solid black;
}
#child {
background-color: blue;
text-align: center;
color: #eee;
font-size: 56px;
}
img {
width: 100%;
vertical-align: top;
}
p {
margin: 0;
}
<div id="parent">
<div id="child">
<img src="http://s3.amazonaws.com/letsrumbl-marketing/images/8c146690-f04b-4e60-89ca-5e2d979f5a16/HowToShare3.png" />
</div>
<div id="child">
<p>Div 2</p>
</div>
<div id="child">
<p>Div 3</p>
</div>
<div id="child">
<p>Div 4</p>
</div>
</div>
try to set margin and padding to 0px in your paragraph
that should solve your problem