Is there a way to place text underneath the image that is centered within the frame?

I need help aligning text horizontally in the center of an image, not the center of the page. I have tried adjusting margins but can't get it just right. Any suggestions?

Here is my current code:

<section class="people">
        <h1>Our people</h1>
        <div class="putin">
            <img src="images/People/poetin.png" class="img1" alt="poetin">
            <p>Vladimir Putin</p>
        </div>
        <div class="stalin">
            <img src="images/People/stalin.png" class="img1" alt="stalin">
            <p>Joseph Stalin</p>
        </div>
        <div class="peter">
            <img src="images/People/peter.png" class="img1" alt="peter">
            <p>Peter the Great</p>
        </div>
    </section>

This is how I'm styling it with CSS:

.people {
    width: 100%;
    height: 60vh;
    background-color: #f1f1f1;
}

.people h1 {
    text-align: center;
    padding-top: 45px;
}

.putin p,
.stalin p,
.peter p {
    margin-top: 280px;
    margin-left: 17.66%;
    float: left;
    position: absolute;
    text-align: center;
}
htmlcss

Answer №1

Positioning elements using pixel values and margins can be quite challenging, often resulting in a non-responsive layout.

An alternative approach is to utilize CSS grid with the layout defined using grid-template-areas.

In the following example, the heading occupies an entire row, while the images are evenly distributed across the second row with 'space-around' justification for balanced spacing.

.people {
  width: 100%;
  height: 60vh;
  background-color: #f1f1f1;
  display: grid;
  grid-template-areas: 'H H H' 'I1 I2 I3';
  justify-content: space-around;
}

.people h1 {
  text-align: center;
  padding-top: 45px;
  grid-area: H;
}

.putin {
  grid-area: I1;
}

.stalin {
  grid-area: I2;
}

.peter {
  grid-area: I3;
}

.putin p,
.stalin p,
.peter p {
  text-align: center;
  font-weight: bold;
}

.img1 {
  height: 200px;
  width: auto;
  cursor: pointer;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  border-radius: 50%;
}

.img1:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}
<section class="people">
  <h1>Our people</h1>
  <div class="putin">
    <img src="https://picsum.photos/id/1015/250/400" class="img1" alt="poetin">
    <p>Vladimir Putin</p>
  </div>
  <div class="stalin">
    <img src="https://picsum.photos/id/1015/250/400" class="img1" alt="stalin">
    <p>Joseph Stalin</p>
  </div>
  <div class="peter">
    <img src="https://picsum.photos/id/1015/250/400" class="img1" alt="peter">
    <p>Peter the Great</p>
  </div>
</section>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unusual occurrences when using absolute positioning, style.top, style.left, and the HTML "a" tag

Struggling to complete a task on Javascript.info involving an "a" tag. The objective is simple - place (and remove) a tooltip above the element upon hover. No issues with positioning over the roof or house, but as soon as I try to place the box a ...

javascripthtmlcsspositiontooltip

Display a JSON object on a web browser

I am trying to display a JSON object on a web browser using HTML. The object is already in a text file and has been properly formatted for readability. My goal is to maintain the same formatting when displaying it on the browser. ...

javascripthtmlangularjsjsonfile

creating a nested dropdown menu with CSS

Experimenting with a nested drop-down menu using basic CSS. I am creating a navigation menu. Everything seems to be working fine, except for the issue that arises when hovering over the ABOUT US section under NEW HERE. It displays the correct result, but ...

htmlcss

I am having issues with this knob not updating, and the reason for this problem is unknown to me

Within my PHP code, I am utilizing the following: <?php @include_once('fields.php'); $gg = fetchinfo("val","inf","n","current"); $mm = fetchinfo("val","info","n","max"); $cc = fetchinfo("num","games","id",$gg); $percent = $cc / $mm * 100; ...

javascriptphphtml

The URL is failing to display the homepage

Can someone help me figure out why my site URL is no longer pulling up the index page from the root directory as it used to? It was working fine until recently when it suddenly stopped working unexpectedly. When I enter devoffpod.purplebottlemedia.com int ...

htmlmysql

Using Aurelia's one-way binding technique with a checkbox

I am searching for a method to bind a checkbox in Aurelia one-way, while still allowing the user to click on the checkbox. Imagine a view similar to the one below that shows one selectable item from a list: <template> <div click.trigger="sel ...

javascripthtmldata-bindingaurelia

Adjusting CSS to realign images on various screen types

I am facing an issue with displaying a background image on a static web page. The height appears differently on various LCD screens. How can I ensure that the height adjusts to approximately 80% of the area? I have tried giving a percentage in the style fo ...

htmlcsstwitter-bootstrapbootstrap-4

Responsive Bootstrap cards that maintain uniform height

I created a grid system with three columns: two equal and one smaller. However, I am facing an issue where I cannot set a height on the cards without using fixed pixel values. Ideally, I would like the three columns to have the same responsive height (100% ...

htmlcsstwitter-bootstrapbootstrap-4

Are there any ways to bring visual attention to a GoDaddy template's SEND button using HTML or JS when the original code is unavailable?

I'm currently working on a GoDaddy website using a template that doesn't clearly highlight the SEND button in a Contact Us form. In order to comply with WCAG accessibility standards, active elements must have visible focus indicators. However, si ...

javascriptjquerycssinline-styleswcag2.0

Combine two distinct menus to create a unified menu

I currently have two separate menus positioned in different areas on a webpage structured like this: <div class="TopNav"> <ul> <li><a href="">one</a></li> <li><a href="">two</a></li> ...

jqueryhtmlcssresponsive-design

Discover the method for measuring the size of a dynamically generated list

I'm currently working on a chat box that displays messages as a list. One issue I'm facing is that when I click on the start chat button, the chat box opens but the length of the list always remains zero. How can I resolve this problem? $(docu ...

javascriptphpjqueryhtml

Creating a responsive card design with Material UI

Creating a responsive card layout for mobile applications is my current challenge const styles = { edit: { width: "40%", marginLeft: 270, background: "#76ff03" }, add: { width: "100%", background: "#18ffff", size: "large" ...

cssmaterial-ui

"Test your Knowledge" - Interactive Quiz with PHP and MySQL

After spending the last two days working on this project, I find myself stuck with some messy and confusing code. Despite searching through countless resources for explanations, I still haven't been able to find a solution. The task at hand is buildi ...

phphtmlmysqlformsvalidation

What is the best way to make my Bootstrap card scale down exclusively?

I am currently working on a game using HTML and JS. The game involves collecting resources to unlock new "helpers" that appear in a div. Everything is functioning well, except that the alignment of the cards in the list is off. This is because the bootstra ...

htmlcssbootstrap-5

Creating a responsive design using HTML and CSS to ensure that all elements fit perfectly on any window size or resolution

Currently, my friend and I are collaborating on a mod for the popular game known as Minecraft. My responsibility is to create a website where we can showcase this mod and provide information about its features. The main issue I am encountering is the inab ...

htmlcssscreen

Struggling to position elements next to a floated div?

I'm facing an issue where I have a floated div with a margin of 200px from the right side, and I am trying to place a table on that empty space. Below is the CSS for the div: #testo { border-right: solid black 1px; background-color: white; mar ...

htmlcss

After applying styling, the modal close button refuses to be clicked

I'm currently facing an issue where I am trying to enhance a modal window with a close button, but encounter problems once styling is applied. The unique aspect of this problem arises from the fact that the close button is not directly in the page HTM ...

javascripthtmlangularjsbootstrap-modal

What is the best technique to position a div at the bottom of a container that has a height of 100

After many attempts and searching for answers, I'm still struggling to figure out how to make the div float to the bottom with 100% height. I've even considered if it's an issue with Pure or something else entirely. It's definitely frus ...

htmlcssyui-pure-css

Personalize the md-tab component in Angular 2

I'm encountering an issue with styling the md-tab component in Angular 2. While I understand that Angular 2 Materials is currently under development, I am wondering if there is a way to customize it, such as removing the bottom-radius. Below is an exa ...

cssangularangular-material

Fluid, Responsive Design with Collapsible Content

My responsive design is relatively new to me, and it includes a series of fluid images in the main content area. When the screen size is below 800px, this area displays one large image that spans the full width, followed by two columns of images: body.our ...

csshtmlresponsive-designfluid-layout