Place the HTML images in the center of the page

I would like the two images to be centered on the page. Please refer to this visual representation for guidance:

Here is the code snippet:

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 28%;
  height: 28%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}
<div class="row" align="center">
  <div class="column">
    <img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" style="width:100%">
  </div>
</div>

htmlcss

Answer №1

give this a shot

.container
{
  display: grid;
  place-items: center;
}

Answer №2

If you're tired of using floats, consider utilizing flexbox instead. Take a look at https://css-tricks.com/snippets/css/a-guide-to-flexbox/ to explore the myriad of options available.

Here's a practical example:

/* General */
* {
  box-sizing: border-box;
}

img {
  width: 100%;
  height: auto;
}


/* Specific */
.row {
  display: flex;
  justify-content: center;
}

.column {
  flex: 0 1 28%;
  padding: 5px;
}
<div class="row">
  <div class="column">
    <img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Snow">
  </div>
  <div class="column">
    <img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
  </div>

</div>

A quick tip: steer clear of inline styling like style="width: 100%" on the images.

Answer №3

The use of 'class="column" within the inner sections is what causes the images to display side-by-side.

To have the images appear one below the other, aligned in a center-justified manner, you can implement these 2 adjustments:

  1. Set 'align=center' for the top-level section.
  2. Assign 'class=row' to the sections containing the images.

Below is the corrected solution:

<div align="center">
    <div class="row">
        <img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" alt="Snow" style="width:300px">
        </div>
    <div class="row">
        <img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" style="width:300px">
    </div>
</div>

Answer №4

Experiment with this:

.box {
  width: 28%;
  height: 28%;
  padding: 5px;
  display: inline-block;
  margin-right: 15px;
  text-align: left;
}

Answer №5

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 28%;
  height: 28%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row {
  display: flex;
  justify-content: center
}
<div class="row" align="center">
  <div class="column">
    <img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" style="width:100%">
  </div>
</div>

I applied the styles 

display: flex; justify-content:center;
to the .row class.

Answer №6

For better alignment and layout, consider using display: inline-block; instead of float:left in your .column class, along with setting width:100% for the .row class.

* {
  box-sizing: border-box;
}
.row{
width: 100%;
}

.column {
  display: inline-block;
  width: 28%;
  height: 28%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}
<div class="row" align="center">
  <div class="column">
    <img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" style="width:100%">
  </div>
</div>

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

Text-color in the v-tooltip

Is there a way to change the text color of v-tooltips components without affecting the tooltip background color? I attempted to inspect the element, but the tooltip only appears on hover, making it impossible to inspect. Below is the code snippet: < ...

cssvue.jsvuejs2vuetify.jsv-tooltip

The use of @font-face in CSS seems to be malfunctioning

I am having trouble changing the font in my CSS to what I want it to be. body{ background-color:#a8a7a7; color:#C50909; font-family: main, Calibri; text-align:center; } @font-face{ font-family: main; src: url('fonts/RegencieLight.ttf'); } ...

htmlcssfont-face

Unable to toggle navigation menu visibility on responsive design

I have provided the following code for responsive design. However, when I click the logo, it does not hide or show as expected. .toggle-nav { display: none; } .menu { float: right; } // Additional CSS code here <nav class="menu"> <ul c ...

htmlcss

I am experiencing difficulties when attempting to insert an email link using Codeigniter 3's framework-specific syntax. The function does not

In my Codeignieter 3 project, I am faced with the task of displaying email addresses stored in the database. When using the code <a href="mailto:<?php echo $record->email; ?>"><?php echo $record->email; ?></a></td>, I e ...

phphtmlcodeigniteremail

"Exploring the Power of Perl in Harnessing Html5 Server-S

I have been working on implementing server sent events to replace ajax long polling within my application. However, I have encountered an issue with my perl script where the sleep function is causing the sending stream to be blocked. #!/opt/lampp/bin/perl ...

htmlperlsleepserver-sent-events

Core MVC - Adjusting Font Size

After setting up an MVC Core App with automatic scaffolding, I am now faced with the challenge of adjusting the font size in my html View. The question is: How can I change the font size in bootstrap.css? There seem to be multiple font sizes available an ...

c#htmlcssasp.net-core-mvc

"Enhance Your Dining Experience with a Menu that Captiv

My goal is to create a small menu with only the initial letter of each name visible, but when focused, I want the full word to appear. Here's an example: css: .menu:focus { } php: <nav> <li class="menu"><a ...

cssresponsive-designfocus

What is the best way to implement rotation functionality for mobile devices when dragging on a 3D globe using D3.js and an HTML canvas?

I have been experimenting with the techniques demonstrated in Learning D3.js 5 mapping to create a 3D globe and incorporate zoom and rotation functionalities for map navigation. Here is the function that handles both zooming and dragging on devices equipp ...

javascripthtmld3.jscanvas

Monitoring changes to a SCSS file

I'm feeling completely baffled. I've put in my best effort to resolve this issue. The problem lies with my SCSS file and its watcher that doesn't appear to be functioning properly. A regular CSS file is not being generated at all. Here&apos ...

htmlcsssass

Issue found in Bootstrap-Multiselect plugin: The dropdown menu appears beneath the outer container when overflow-y is applied

My experience with using Bootstrap-Multiselect and encountering an issue where the dropdown disappears when the outer container has overflow-y: scroll and a max-height has prompted me to seek solutions. I am looking for a way to ensure that the dropdown is ...

jqueryhtmlcsstwitter-bootstrapbootstrap-multiselect

Steps to create a clickable drop-down arrow with a label

I've designed a vertical navigation accordion menu that allows users to hover and click on any title (label) to expand a sub-menu. However, I'm facing an issue where my drop-down arrow is not clickable, unlike the rest of the label which works f ...

htmlcssnavigationhoverclickable

How come my dimensions are not returning correctly when I use offset().top and scrollTop() inside a scrolling element?

Currently in the process of developing a web app at , I am looking to implement a feature that will fade elements in and out as they enter and leave the visible part of a scrolling parent element. Taking inspiration from myfunkyside's response on this ...

javascriptjquerycssscrolloffset

Load CSS styles once the HTML content has been generated by the PHP script

One way to dynamically add a section of HTML during page load is by making use of PHP in the index.php file: In your index.php file, you can include a section like this: <html> <head> <link href="css/style.css" rel="stylesheet"> ...

phphtmlcssloading

Creating a well-aligned form using Material-UI

Exploring Material-UI for the first time! How can a form be built where certain fields are arranged horizontally, others stacked vertically, and all aligned perfectly both vertically and horizontally? Check out this example image: I've created simila ...

javascripthtmlcssreactjsmaterial-ui

Incorporating a complex React (Typescript) component into an HTML page: A Step-by

I used to have an old website that was originally built with Vanilia Javascript. Now, I am in the process of converting it to React and encountering some issues. I am trying to render a compound React(Typescript) component on an HTML page, but unfortunatel ...

javascripthtmlreactjstypescript

Display content from a PHP page inside a Twitter Bootstrap modal

I have set up a modal pop-up window to showcase all comments on my blog posts. However, I am facing an issue where I am unable to view individual comments by clicking on the respective link. <!-- Modal --> <div class="modal fade" id="myModal" ...

phpcsstwitter-bootstrap

What is the best way to ensure my checkboxes are positioned on individual lines?

I am trying to vertically align my checkboxes so that each option appears on a separate line. I searched online and found suggestions to use vertical-align: middle, but that only changes the position of the label. I want each checkbox to be displayed on it ...

htmlcsscheckboxvertical-alignment

Hiding overflow when navigating back a page in Safari

I need help finding a solution to this issue. On my website, the results page works perfectly fine until I navigate to a product's details page and then return to the results using the "page before" button. At that point, the overflow becomes hidden, ...

htmlcssscrollsafarioverflow

How to handle CSS line wraps: enlarge the second line or determine the number of words per line specifically?

Is it possible to use CSS to control line wraps? I would like to have lines with a similar amount of words per line, or at least avoid one-word lines. Original: A few words for a very long title that will probably span two lines Desired Outcome: A few ...

htmlcss

How to position footer at the bottom of Material UI cards - see example below

After getting inspiration from the material-ui example of cards, I wanted to create a grid layout with multiple cards. My goal was to make all the cards have equal height (which I achieved using height:100%) and position the footer at the bottom of each ca ...

javascriptcssreactjsmaterial-ui