Question 238436 in CSS Question posted in
Some basic documentation can be found here.

Css – image (figure )in middle of row, just below a p tag

Nothing I try seems to work properly, sometimes I can center the image but the the figcaption then squeezes itself into a tiny corner.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/5.4.1/css/bootstrap.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
              .custom-row {
        background: linear-gradient(to bottom, #f8efef, #f7faf8);
        padding:10px;
        border-radius: 15px;
        padding-left: 10%;
        padding-right: 10%;
        margin-left: 0;
        margin-right: 0;

        position: relative;
        left:0%;
      }

      #fps{width:60%; }
    </style>
</head>
<body>    
    <div class = "row custom-row">
        <h3 style = "text-align: center">  A first person shooter in JavaScript from scratch </h3>
        <a>   <!--  i need this a tag   -->
            <p style = "text-decoration: none;">
                example text  hyhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhjgjgjgkgfkluyfkutdytfkgflhblblhlijhhyhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhjgjgjgkgfkluyfkutdytfkgflhblblhlijh
            </p>
            <figure>
                <img id = "fps" src = "../static/fps.png"/>
                <figcaption style = "text-decoration: none; color: inherit; display: table-caption; caption-side: bottom ;">
                    my figcaption text
                </figcaption>
            </figure>
        </a>
    </div>
</body>
</html>

I’ve also tried having my row class like:

<div class = "row custom-row justify-content-md-center">

It doesn’t seem to change a thing.

I’ve also tried .text-center and . img-centre like this:

<figure class="text-center"> 
    <img id = "fps" class="img-center"...

This also does nothing

How can I have this image centered nicely?

Tags:

2

Answers


  1. 0

    Try to use flex center properties over figure element:

    display: flex;
align-items: center;
justify-content: center;
flex-direction: column;

    Or css flex classes of bootstrap:

    d-flex flex-column align-items-center justify-content-center

    https://getbootstrap.com/docs/5.3/utilities/flex/#enable-flex-behaviors

    Fiddle:

    .custom-row {
  background: linear-gradient(to bottom, #f8efef, #f7faf8);
  padding: 10px;
  border-radius: 15px;
  padding-left: 10%;
  padding-right: 10%;
  margin-left: 0;
  margin-right: 0;

  position: relative;
  left: 0%;
}

#fps {
  width: 60%;
}
    <!-- CDN bootstrap https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css -->

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row custom-row">
  <h3 style="text-align: center"> A first person shooter in JavaScript from scratch </h3>
  <a>
    <!--  i need this a tag   -->
    <p style="text-decoration: none;">
      example text hyhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhjgjgjgkgfkluyfkutdytfkgflhblblhlijhhyhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhjgjgjgkgfkluyfkutdytfkgflhblblhlijh
    </p>
    <figure class="d-flex flex-column align-items-center justify-content-center">
      <img id="fps" src="../static/fps.png" />
      <figcaption style="text-decoration: none; color: inherit; display: table-caption; caption-side: bottom ;">
        my figcaption text
      </figcaption>
    </figure>
  </a>
</div>
    Login or Signup to reply.
  2. 0

    You can delete these styles in figcaption

        display: table-caption;
    caption-side: bottom;

    and give figure tag style

    text-align: center
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search