Place two pictures in the center of a div container

Here is a div setup that I am working with:

<div id="browsers">
  <h2>Title</h2>
  <p>Text recommending the use of either Chrome or Firefox.</p>
  <a href="http://google.com/chrome/"><img src="img/64-chrome.png" /></a>
  <a href="http://mozilla.org/firefox/"><img src="img/64-firefox.png" /></a>
</div>

With the following CSS styles:

#browsers {
  margin:0 auto;
  padding:22px;
  width:500px;
  background:white;
}

I am trying to center the two images in the middle of the div. Although I have managed to center them using:

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

The result is not ideal as one image is stacked on top of the other. I would like them to be aligned in a row. What is the best approach to achieve this layout?

Answer №1

Simply use #browsers {text-align:center;} and delete the content within #browsers img {...}

Since there is additional content in #browsers, it is necessary to place your browser icons in a separate div or move the extra content outside of #browsers.

For example:

<div class="browser-icons"> ... </div>

Answer №2

The issue lies in how you are defining the images as blocks with display:block;. Consider using display:inline; for a different approach.

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

Hide or show list items in an unordered list using jQuery

I am interested in creating a script that can toggle between "show more" and "show less" functionality for elements in a list. I came across this script: HTML <ul id="myList"> <li>One</li> <li>Two</li> <li> ...

CSS Style for Organizing Content

I'm struggling to create CSS for a hierarchical display, resembling a tree structure of files and folders. Currently, I am using nested unordered lists in my HTML: <ul> <li>animals<ul> <li>dogs</li> <li>c ...

Tips for reactivating a disabled mouseover event in jQuery

I created an input field with a hover effect that reveals an edit button upon mouseover. After clicking the button, I disabled the hover event using jQuery. However, I am unable to re-enable this hover event by clicking the same button. Here is the code s ...

Navigation bar with dropdown functionality that adjusts its width based on the content inside

Need help with a CSS dropdown menu issue on my WordPress site. The contents of the submenus are too wide, even after setting a static width for them. I'm looking for a way to make the submenu width adjust dynamically based on the title length. Any exp ...

Tips for getting free jqgrid to display frozen column borders in the search toolbar

If the actions column has a caption of "Activity" or custom settings and is frozen, the free jqgrid will not display column borders for this column in the search toolbar. Vertical lines do not appear in the search toolbar: Is there a way to resolve this ...

Using ng-repeat in Angular causes the style of a div to become hidden

Utilizing angular ng-repeat to generate multiple divs, the original template html code is as follows: <div class="span5 noMarginLeft"> <div class="dark"> <h1>Timeline</h1> <div class="timeline"> <div c ...

Customize Bootstrap 4's .btn-link style to include a smooth transition for under

Recently, I've been working on customizing Bootstrap 4's .btn-link by adding a special hover effect - a line that smoothly transitions from left to right beneath the link when the mouse hovers over it. Although things are mostly going according ...

Ways to quickly change a class when clicking (without waiting for mouse button release)

Is there a way to instantly change the color of my span element when it's clicked by the user, rather than waiting for the mouse button to be released? This is the CSS code I'm using for the class: span.active{ color:#bdbcae; } I've tri ...

How to vertically align and center multiple divs with Flexbox programming

I have been grappling with the challenge of aligning two sets of rows vertically, each consisting of an image on one side and text on the other. While I usually use flex to achieve vertical alignment, it seems that a different approach is needed in this pa ...

Having difficulty positioning the dropdown above the other elements in the body

Below, you'll notice that the dropdown menu isn't positioned correctly over other body elements like the timer. I'm utilizing bootstrap for the dropdown and redcountdown js for the timer. https://i.sstatic.net/OO8Jm.png Here is the HTML: & ...

What is the best way to flip the pentagon shape made with CSS?

I need assistance in creating a downward-pointing pentagon shape. However, I am unsure of how to define the points on the shape. #pentagon { margin:70px 0 5px 20px; position: relative; width: 110px; border-width: 100px 36px 0; border-style: solid; ...

The issue with the table inside a bootstrap modal is that it is not properly sized and does

I am facing an issue with a modal that has two columns. One of the columns contains a table which is too wide and requires horizontal scrolling. I need help to make the table fit into the column without any scrolling problems. The table should be able to s ...

The Google map is not appearing when placed within the "row" class

My goal is to showcase Google Maps on my website, and every time I try to do so using the following code: <div class="large-12 columns" id="map-canvas"></div> The map displays perfectly and works as expected. However, when I nest this div wi ...

Using the CSS property 'clear' creates a significant gap in the layout

Using a div like this to clear space after floats: .clear { clear:both; } However, the formatting is getting messed up with extra space. Any ideas on how to fix it? Appreciate your help! ...

Can you provide the keycodes for the numpad keys: "/" and "." specifically for the libraries I am utilizing or any other library that does not overlook them?

I've hit a roadblock with my Chrome Extension development. Despite using two different methods to add keyboard functionality, the keys "/" for divide and "." for decimal on the keypad are just not registering. I've attempted to tackle this issue ...

Dealing with ng-repeat and button alignment across Chrome, Edge, and Firefox

Can someone help me understand this strange behavior I am experiencing across all browsers? <div style="margin-top:5px"> <button translate="clear" ng-click="xyz.clear()" class="btn btn-default"></button> <butt ...

I recently aligned a component within a column of the Bootstrap grid using the <center> tag

Apologies for admitting this on Stackoverflow, but I'm struggling to center an element and the center tag seems to do the trick. My CSS skills are limited, so I'm reaching out to see if there's a better way to achieve this? <div class="c ...

Looping through a jQuery script to add a class if a certain condition is met in another class

$(document).ready(function() { if ($("#grid .media-box").hasClass("brand1")) { $("#grid .media-box-content").addClass("brand01") }; } }); and in body looping div grid <div id="grid"> <?php foreach($data as $items) { ?> <div cl ...

Looking to add a dropdown feature to my current main navigation bar

I've been struggling to add a drop-down menu to my website's main menu. Every time I try, something goes wrong - sometimes the menu appears inline, other times it completely messes up the layout. Here is the HTML code snippet: <ul class="m ...

The printed Bootstrap web page is being truncated

I have a unique dynamic webpage created with Bootstrap that needs to be printable. I am implementing media queries for styling the page when printing: /** Custom Print Styles **/ @media print { header, .menu, footer { display: none; ...