Struggling with aligning elements using CSS? Let me assist

I have been working on creating circle cards using HTML and CSS. I have successfully managed to make the cards clickable to open a web URL.

However, I am facing issues with aligning the elements properly on the page.

I attempted using display: flex to place the images side by side, but there is too much space between the circle cards. Is there a way to reduce this space?

Additionally, I am struggling to center the name of the circle within the image. Can someone assist me in achieving this alignment?

.circle {
  background: rgba(15, 28, 63, 0.125);
  border-radius: 50%;
  height: 8em;
  object-fit: cover;
  width: 8em;
}

h1 {
  text-align: center;
}

.row {
  display: flex;
}

.circle-one, .circle-two, .circle-three {
  flex: 33.33%;
  padding: 5px;
}
<div>
  <!-- your widget template -->
  <h1> Hello World </h1>
  <div class="row">
    <div class="circle-one">
      <a href="{{data.my_profile_url}}" target="_blank">
        <img class="circle" src="https://images.unsplash.com/photo-1555448248-2571daf6344b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="Tyler">
      </a>
      <h5> Circle One</h5>
    </div>
    
    <div class="circle-two">
      <a href="{{data.my_profile_url}}" target="_blank">
        <img class="circle" src="https://images.unsplash.com/photo-1579546929518-9e396f3cc809?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjExMDk0fQ&auto=format&fit=crop&w=1000&q=80" alt="Tyler">
      </a>
      <h5> Circle Two</h5>
    </div>
    
    <div class="circle-three">
      <a href="{{data.my_profile_url}}" target="_blank">
        <img class="circle" src="https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528_960_720.jpg" alt="Tyler">
      </a>
      <h5>Circle Three</h5>
    </div>
  </div>
</div>

This is what I currently have:

https://i.sstatic.net/SrWB1.png

htmlcssflexbox

Answer №1

  1. implement display flex
  2. apply align-items:center

.circle {
  background: rgba(15, 28, 63, 0.125);
  border-radius: 50%;
  height: 8em;
  object-fit: cover;
  width: 8em;
}

h1 {text-align: center;}

.row {
  display: flex;
  align-items:center;
  justify-content:space-around;
}

.circle-one,  .circle-two, .circle-three {
  flex: 33.33%;
  padding: 5px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
<div>
  <!-- your widget template -->
  <h1> Greetings World </h1>



    <div class="row"> 


      <div class="circle-one">
        <a href="{{data.my_profile_url}}" target="_blank">
          <img class="circle" src="https://images.unsplash.com/photo-1555448248-2571daf6344b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="Tyler">

        </a>
        <h5> Circle First</h5>
      </div>

      <div class="circle-two">
        <a href="{{data.my_profile_url}}" target="_blank">
          <img class="circle" src="https://images.unsplash.com/photo-1579546929518-9e396f3cc809?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjExMDk0fQ&auto=format&fit=crop&w=1000&q=80" alt="Tyler">

        </a>
        <h5> Circle Second</h5>
      </div>

      <div class="circle-three">
        <a href="{{data.my_profile_url}}" target="_blank">
          <img class="circle" src="https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528_960_720.jpg" alt="Tyler">

        </a>
        <h5> Circle Third</h5>

      </div>

    </div>
  </div>

Answer №2

Completing this task is quite straightforward, there are multiple methods to achieve it. One approach involves:

enclosing your text (circle one, circle two, and circle three) within a div tag and using both an img tag and an anchor tag, then applying CSS styles to the respective classes in your stylesheet.

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

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

How can I upload a file using the following HTML script with Selenium in Python?

I attempted to utilize the send_keys() method directly on an attached path file, but encountered an error. Can anyone provide guidance on how to properly upload a file? Here is my Selenium Python script: from selenium import webdriver from selenium.webdri ...

pythonhtmlseleniumselenium-webdriverfile-upload

What is the best way to create a div that extends beyond the borders of the screen, but still allows only

I am currently working on a React project for a website. I am creating a category bar that should slide only the component in the mobile version, without moving the entire page. Check out the desired design here However, the current appearance is differe ...

javascripthtmlcssreactjsbootstrap-4

Can the background image be resized while preserving the offsets?

Can I adjust the offsets of multiple images within an image and resize it to a different width and height? I have an image that I want to shrink while maintaining the x and y offsets of the individual images inside it. Below is a sample of the image I ha ...

css

What is the method for implementing right/left text ellipses on flexed buttons that span the entire viewport width using CSS?

I currently have the following code: .viewport { width: 300px; } .container { --color-dark: rgb(40, 40, 40); --color-light: rgb(255, 255, 255); --color-base-background: rgb(255, 255, 255); ... <div class="viewport"> <di ...

css

What could be the reason for the inconsistent resizing behavior of this DIV container?

Upon viewing this demo, it becomes evident that there is an outer DIV containing an inner DIV on the left side with two inner SPANS. The challenge lies in positioning the two SPANS next to the DIV. If a line break (BR) is used to separate them, the width o ...

htmlcss

Cross-browser compatibility problem: Firefox not displaying layout properly

I am encountering browser problems, as well as issues when using the same browser on a different computer. The links on my website are not positioned correctly over the background. When viewing with Firefox, the opacity and positioning features are not fu ...

htmlcssbrowseropacity

Displaying a webpage in JavaFX Scene Builder

Is it possible to display a webpage or an HTML file using JavaFX Scene Builder? Thank you. ...

javafxhtml

Using scope variables in AngularJS version 1.4.8 with ng-style

index.html: <script src="app.js"></script> <div ng-app="app" ng-controller="app" ng-style="{ color: thecolor }"> foo </div> app.js: angular.module("app", []) .controller("app", function() { $scope.thecolor = "red"; }); Fid ...

cssangularjsangularjs-scope

Update the CSS dynamically using JavaScript or AngularJS

Is there a way to dynamically modify this CSS style using JavaScript or in an Angular framework? .ui-grid-row.ui-grid-row-selected > [ui-grid-row] > .ui-grid-cell{ background-color: transparent; color: #0a0; } .ui-grid-cell-focus ...

javascripthtmlcssangularjs

What is the reason for the presence of "e034" in CSS not resulting in the creation of a tick icon?

Here is the CSS code I am using: <style> .icons:before { content: "\e034"; color: #00bc9b; font-size: 16px; margin-top: -1px; margin-left: -1px } </style& ...

htmlcss

Configuring a Revolution Slider 5+ layer to display as a fixed layer

I wish to keep a consistent shape below my text on all the slides without any flickering. Although Revolution Slider offers static layers, they always appear on top and cannot be layered beneath other slide layers. I attempted to create a layer with no t ...

javascriptjquerycsswordpressrevolution-slider

Automatically close the previously flipped card in Bootstrap 4

I have a card container with multiple cards inside. When I click on a card, it flips to show the back. However, I want the previously clicked card to close when I click on another card. My current code is not working as expected despite trying various Jque ...

javascripthtmlcssbootstrap-4

Do websockets provide an effective solution for search box functionality?

Imagine having a textbox or searchbox on a webpage. <input type="search"> Now, what if we want this textbox to interact with the server only when the cursor is actively focused inside it? This application is designed for widespread online usage an ...

htmlsearchwebsocket

Left-aligned Bootstrap Navbar Brand with about/gallery on the right

https://i.sstatic.net/pymGo.png Although I am content with the current state of my brand, I would like to adjust the positioning of my About, Gallery, and icons to the right. There seems to be a noticeable gap at the end of the "envelope" icon that I woul ...

htmlcssbootstrap-4

What is the best way to incorporate a unique font into text using CSS?

Similar Question: How do I implement custom fonts in CSS? Is there a way to use CSS to define a custom font for elements like a <div>? I've heard about using @font-face ... but it doesn't seem to be effective in IE or Chrome. ...

htmlcssfonts

Convert a solo row into individual columns within a grid format

My goal is to design a grid layout where each row can be divided into columns independently, similar to the example shown below: https://i.stack.imgur.com/VFPFq.png Here's the code snippet I have been experimenting with: .container { position ...

htmlcsscss-grid

Firefox inexplicably splits words in haphazard locations

Although I know about this question, the solution provided doesn't seem to work for me Firefox word-break breaks short words at random points Despite applying the recommended CSS property as shown in the screenshot, it appears that the latest versio ...

cssfirefox

Creating grid layouts in Bootstrap 4 with buttons

Recently, I've delved into Bootstrap 4 and HTML5/CSS. My goal is to design a text area with two buttons located on the side (horizontally centered) like this: https://i.sstatic.net/TnHSy.png Below is the code snippet that I have so far: <link ...

htmltwitter-bootstrapbootstrap-4

Assistance required in creating a numerical list from an array of objects

I'm currently facing an issue with creating a numbered list from an array of objects. Below, you'll find the code containing the objects. You need to add the necessary TS code to display the atom names along with their weights in a numbered list ...

javascripthtmltypescriptlistobject

Ways to make two blocks of text appear side by side and adapt to different screen sizes

Check out our website imageI'm facing a challenge in making these two text elements appear next to each other rather than stacking on top of each other. Additionally, I need them to adapt responsively to changes in screen size. When 'Icontext&ap ...

htmlcss