时间戳

首页 > 解决方案 > (HTML & CSS) 我正在尝试在图像之间添加圆圈，但它们不会垂直居中

html - (HTML & CSS) 我正在尝试在图像之间添加圆圈，但它们不会垂直居中

问题描述

所以我试图在图像之间添加一些圆圈来为我的网页添加一些样式。它们水平居中，但不是垂直居中。我希望圆圈与图像垂直居中，你知道怎么做吗？欢迎任何帮助，因为我是一名新的培训开发人员！到目前为止，我将留下我的网页图像，以及我的 HTML 和 CSS 代码。

.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>

网站图片

标签： htmlcss

解决方案

设置margin-bottom: auto和margin-top: auto

.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;
    margin-top: auto;
    margin-bottom: auto;
  }
 <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>

只有一件小事：下次请添加最小的可重现示例:)

推荐阅读