-1

When I have display as 100%, everything displays fine, but I'd like to have the image a little smaller so I've set the width as 30% for now - the issue with this is that the image stops centering once I do that (would anybody know why that's the case?).

If I remove display block, it centers, but then sits on the same line as the button - however if I then add in display:block to the button, the left/right padding stretches across the width of the container.

Here's the codepen where I've saved my project: https://codepen.io/vivl/pen/GRWYeaw - but here's the code I'm having trouble with:

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

4 Answers4

0

You can set auto margins to buttons and icons and make buttons display: block; and width: fit-content:

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>
MetropolisCZ
  • 567
  • 1
  • 8
  • 20
0

To center an image, set left and right margin to auto and make it into a block element. For example:

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Here is the link that I found this answer in -> https://www.w3schools.com/howto/howto_css_image_center.asp

moshfiqrony
  • 4,303
  • 2
  • 20
  • 29
User One
  • 287
  • 2
  • 9
0

At first wrap the image with a div

<div class="img-wrapper">
    <img src="link" class="img-class_name">
</div>

Now style the outer div like this

.img-wrapper{
  display: flex;
  justify-content: center;
  width: 100%;
}
moshfiqrony
  • 4,303
  • 2
  • 20
  • 29
0

Just use the margin to place in center irrespective of the image size. Here use this code :

.image {
    margin-bottom: 25px;
    width: 30%;
    border-top: 1px solid #cee5d0;
    display: block;
    margin:0 auto;
}
Manish Khatri
  • 161
  • 7