时间戳

首页 > 解决方案 > 如何将宽度小于 100% 的图像居中？

html - 如何将宽度小于 100% 的图像居中？

问题描述

当我显示为 100% 时，一切都显示正常，但我想让图像更小一点，所以我现在将宽度设置为 30% - 问题是图像一旦我停止居中那（有人知道为什么会这样吗？）。

如果我删除显示块，它会居中，但与按钮位于同一行 - 但是，如果我随后将 display:block 添加到按钮，左/右填充会延伸到容器的宽度。

这是我保存项目的代码笔：https ://codepen.io/vivl/pen/GRWYeaw - 但这是我遇到问题的代码：

.image {
    margin-bottom: 25px;
    width: 30%;
    border-top: 1px solid #cee5d0;
    display: block;
}

标签： htmlcss

解决方案

您可以为按钮和图标设置自动边距并使按钮显示：块；和宽度：适合内容：

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* CSS RESET */

html {
    box-sizing: border-box;
}

body {
    background-color: #9fe6a0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.pricing {
    background-color: white;
    display: inline-block;
    flex-direction: column;
    width: 100%;
    max-width: 1900px;
    padding: 50px 15px;
    text-align: center;
    text-transform: uppercase;
    border-radius: 10px;
    /* justify-content: center;
    align-items: center; */
}

/* .button:last-child {
    border-bottom: none;
} */

.pricing-plan {
    padding: 50px;
    font-size: 3em;
    border-bottom: 1px solid #cee5d0;
}

.pricing-features-item {
    padding: 10px;
    margin: 10px;
    font-size: 1.5em;
    color: #4aa96c;
    border-bottom: 1px solid #cee5d0;
}

.pricing-plan-cost {
    padding: 10px;
    font-size: 3em;
    display: block;
}

.button {
    padding: 15px 20px;
    font-size: 1.5em;
    text-decoration: none;
    color: black;
    border: 1px solid #2f5d62;
    border-radius: 10px;
    display: inline-block;
    margin: 1em;
}

.image {
    margin-bottom: 25px;
    width: 30%;
    border-top: 1px solid #cee5d0;
    /* Removed display: block; */
}

.image:nth-of-type(1) {
    border-top: none;
}

/* Styles added by me */
image {
  margin: auto;
}
.button {
  display: block;
  width: fit-content;
  margin: 1em auto;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="app.css">
    <title>Pricing Meal Plan</title>
</head>

<body>

    <div class="pricing table plan">

        <img class="image" src="https://image.flaticon.com/icons/png/512/2366/2366518.png">
        <h2 class="pricing-plan">Individual</h2>
        <ul class="pricing-plan-features">
            <li class="pricing-features-item">3 portions/day</li>
            <li class="pricing-features-item">Includes Vegetarian, Meat-lovers & Mixed options</li>
        </ul>
        <span class="pricing-plan-cost">$24</span>
        <a href="#/" class="button">Order Now</a>


        <img class="image" src=https://img-premium.flaticon.com/png/512/2082/2082045.png?token=exp=1623515154~hmac=5fe8a85c5f61e9bc650f5c8cae14487f>
        <h2 class="pricing-plan">Two Share</h2>
        <ul class="pricing-plan-features">
            <li class="pricing-features-item">6 portions a day</li>
            <li class="pricing-features-item">Enough two share!</li>
        </ul>
        <span class="pricing-plan-cost">$40</span>
        <a href=#/ class="button">Order Now</a>


        <img class="image" src=https://image.flaticon.com/icons/png/512/2620/2620464.png>
        <h2 class="pricing-plan">Family Plan</h2>
        <ul class="pricing-plan-features">
            <li class="pricing-features-item">14 portions a day</li>
            <li class="pricing-features-item">Suitable for big families with even bigger appetites</li>
        </ul>
        <span class="pricing-plan-cost">$120</span>
        <a href="#/" class="button">Order Now</a>

    </div>

</body>

</html>

推荐阅读