I have a parent div ("prizes") with 3 child divs ("galleryItem"). Each div has an h2, img, and p element. The h2 elements are on the same line when viewing in the browser, but I can't figure out how to align the img's and p's to the same line as well. Here is a link to my code:
<div class="prizes">
<h1>Prizes</h1>
<div class="galleryItem">
<h2>6/29</h2>
<img src="ipad3.jpg">
<p>Ipad Mini 3</p>
</div>
<div class="galleryItem">
<h2>6/29</h2>
<img src="xbox.png">
<p>Xbox One</p>
</div>
<div class="galleryItem">
<h2>6/29</h2>
<img src="beats.png">
<p>Beats by Dre Pro</p>
</div>
<div class="galleryItem">
<h2>6/29</h2>
<img src="ikea.png">
<p>$250 Ikea Gift Card</p>
</div>
</div>
.prizes {
margin: 4.5em auto;
background-color: whitesmoke;
padding-top: 100px;
overflow: hidden;
display: table;
}
.prizes h1 {
color: darkslategray;
margin-left: auto;
margin-right: auto;
position: relative;
top: -75px;
font-family: 'Lato';
text-align: center;
}
.galleryItem {
float: left;
color: darkslategray;
width: 17%;
margin: 0 4%;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.galleryItem h2 {
font-family: 'Lato', Sans-Serif;
}
.galleryItem img {
max-width: 100%;
}
.prizes p {
float: left;
color: darkslategray;
font-family: 'Merriweather', serif;
margin-top: 40px;
}
I essentially want each div to be a "blurb" with all three inline and the elements of each inline with each other. Thanks in advance for any help, it is greatly appreciated!
Put image inside the p tag.
<div class="prizes">
<h1>Prizes</h1>
<div class="galleryItem">
<h2>6/29</h2>
<p>
<img src="ipad3.jpg">
Ipad Mini 3
</p>
</div>
</div>
set marign .prizes p like
.prizes p {
float: left;
color: darkslategray;
font-family: 'Merriweather', serif;
margin-top: 40px;
margin:15px 0;
}
.prizes { margin: 4.5em auto; background-color: whitesmoke; padding-top: 100px; overflow: hidden; display: table; } .prizes h1 { color: darkslategray; margin-left: auto; margin-right: auto; position: relative; top: -75px; font-family: 'Lato'; text-align: center; } .galleryItem { float: left; color: darkslategray; width: 17%; margin: 0 4%; text-align: center; display: table-cell; vertical-align: middle; } .galleryItem h2 { font-family: 'Lato', Sans-Serif; } .galleryItem img { max-width: 100%; } .prizes p { float: left; color: darkslategray; font-family: 'Merriweather', serif; margin-top: 40px; margin:15px 0; }
<div class="prizes"> <h1>Prizes</h1> <div class="galleryItem"> <h2>6/29</h2> <img src="ipad3.jpg"> <p>Ipad Mini 3</p> </div> <div class="galleryItem"> <h2>6/29</h2> <img src="xbox.png"> <p>Xbox One</p> </div> <div class="galleryItem"> <h2>6/29</h2> <img src="beats.png"> <p>Beats by Dre Pro</p> </div> <div class="galleryItem"> <h2>6/29</h2> <img src="ikea.png"> <p>$250 Ikea Gift Card</p> </div> </div>
您需要将img
标签包装在p
元素Demo中
我看过您的设计,所有设计都居中对齐,只需从p标签中删除float属性
<div class="prizes">
<h1>Prizes</h1>
<div class="galleryItem">
<h2>6/29</h2>
<img src="ipad3.jpg">
<p>Ipad Mini 3</p>
</div>
<div class="galleryItem">
<h2>6/29</h2>
<img src="xbox.png">
<p>Xbox One</p>
</div>
<div class="galleryItem">
<h2>6/29</h2>
<img src="beats.png">
<p>Beats by Dre Pro</p>
</div>
<div class="galleryItem">
<h2>6/29</h2>
<img src="ikea.png">
<p>$250 Ikea Gift Card</p>
</div>
</div>
.prizes {
margin: 4.5em auto;
background-color: whitesmoke;
padding-top: 100px;
overflow: hidden;
display: table;
}
.prizes h1 {
color: darkslategray;
margin-left: auto;
margin-right: auto;
position: relative;
top: -75px;
font-family: 'Lato';
text-align: center;
}
.galleryItem {
float: left;
color: darkslategray;
width: 40%;
margin: 0 4%;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.galleryItem h2 {
font-family: 'Lato', Sans-Serif;
}
.galleryItem img {
max-width: 100%;
float:left;
}
.prizes p {
float: none;
color: darkslategray;
font-family: 'Merriweather', serif;
margin-top: 0;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.