So I am trying to add some circles in between images to add some style to my webppage. They centered horizontally, but not vertically. I wanted the circles to be vertically centered with the images, do you know how to do this? Any help is welcome as I am a new developer-in-training! I will leave an image of my webpage so far, and my HTML and CSS code.
.features {
padding: 20px;
display: flex;
flex-direction: row;
color: rgb(0, 0, 0);
}
.features figure {
margin: auto;
width: 100px;
}
.features figure{
width: 200px;
border: 1px solid rgb(117, 117, 117);
border-radius: 10px;
box-shadow: rgb(0, 0, 0) 0px 0px 5px;
text-align: center;
}
.figImg{
object-fit: contain;
width: 200px;
border-radius: 10px 10px 0 0;
}
header .logo a {
background: url("My Post.png");
display: inline-block;
width: 350px;
height: 250px;
text-indent: -99999999px;
background-repeat: no-repeat;
background-size: 350px;
position: relative;
top: -160px;
color: white;
}
.bod {
padding-left: 25px;
padding-right: 25px;
font-family: 'Lato', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans';
}
p {
background: rgb(238, 238, 238);
border-radius: 10px;
border: 2px solid black;
padding: 10px;
box-shadow: rgb(0, 0, 0) 0px 0px 5px;
}
.dot {
height: 12px;
width: 12px;
background-color: rgb(238, 238, 238);
border-radius: 50%;
display: inline-block;
border: 2px solid black;
} <section class="bod">
<p>Hello! :) My name is Novakron. I am an American Youtuber and Skinner. If you want to know more about me then head over to the "About Me" page! I will make you any skin that you want, and I can re-shade skins for you, if you send me the file! I have made over 50+ skins before, and have a lot of experience. I also can do anything you want for a very low price (see "Pricing" page. If you are looking for a new skin, or just an upgrade then you are in the right place! Thank you for visiting my website, and if you do decide to pick me to make you an awesome skin, then head over to the "Contact" Page! </p>
</section>
<section class="features">
<figure>
<img src="Applll.png" alt="E Girl Skin" class="figImg">
<figcaption>Apple?</figcaption>
</figure>
<span class="dot"></span>
<figure>
<img src="sterrnweell.jpg" alt="Mario Skin" class="figImg">
<figcaption>Weird Steering Wheel</figcaption>
</figure>
<span class="dot"></span>
<figure>
<img src="400xx400x.jpg" alt="E Boy Skin" class="figImg">
<figcaption>This pic is dumb</figcaption>
</figure>
</section>
