Align both vertically and horizontally in the center of the body

I have two images aligned vertically inside a wrapper. How do I center the wrapper within the body?

What is the best way to center my wrapper inside the body?

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="utf-8">
    <base href="<?php echo BASE; ?>">
    <title>Page Title</title>
    <meta name="description" content="Description goes here">
    <style type="text/css">
        body {margin: 0; padding: 0;}
        .wrapper  {background-color: red; display: inline-block;}
        .wrapper span {display: inline-block; vertical-align: middle; margin: 0 20px;}
        .wrapper span img {display: block;}
    </style>
</head>
<body>
<div class="wrapper">
    <span><a href=""><img src="..." width="225" height="60" alt="..."></a></span>
    <span><a href=""><img src="..." width="120" height="120" alt="..."></a></span>
</div>
</body>
</html>

Answer №1

Consider including:

text-align: center; display: table-cell; vertical-align: middle;

within the containing element.

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

The onChange function is not triggered when the dropdown menu consists of only one item

I am facing an issue with my dynamically populated dropdown menu. When the dropdown contains only one element, the onChange() function of my select tag does not work as expected. It functions perfectly fine when there are multiple elements present. How c ...

What is the best way to modify the CSS class of a particular textbox within a gridview using C# in ASP.NET?

I need assistance with removing and adding a CssClass to a specific textbox within a gridview. I have attempted the following code but it does not update the css for the textbox. Here is the CSS in my .aspx page: <style type="text/css"> .erroram ...

Issue with hiding and showing two divs using Jquery

Whenever the page is refreshed, I notice that my second <div> is displayed, which I would like to prevent. $(function(){ $("#div2").hide(); $("button").click(function(){ $("#div1").hide() $("#div2").fadeIn(1000) }); }); ...

Enhance the user experience by implementing a smooth transition effect when loading new pages

Recently, I've been exploring a method to load content from an external HTML file using AJAX on my website. While it's working well, I'm now interested in adding a page transition effect when the content changes. Specifically, I'd like ...

Issues with style not loading properly within innerHTML in Angular2

Currently, I am in the process of developing a page using Angular2/4 that includes a left navigation bar. To achieve reusability, I have separated this left menu into its own component and nested it within the main component. The objective is to utilize th ...

What is the process for determining the destination of my form data in HTML?

I recently created a form for my website, but I'm unsure of how to set it up so that the information submitted goes somewhere. After scouring various forums, it seems like I need to generate a PHP page. Can someone provide me with tips on how to get s ...

How can Selenium be used to verify if an HTML5 validation has been activated?

When testing my web application with Selenium, I rely on HTML5 form validations for all the form validation. Is there a method in Selenium to verify if a form/input validation was triggered? ...

Flexbox layout to achieve equal height columns with content centered

In search of a solution to create two columns with equal height and center-aligned content within each column, while also maintaining different widths. Issue: The challenge lies in achieving both 'equal height' and 'middle aligned' at ...

Transparent Box for Images - Overlay Effect

Is it possible to add text on top of an image with a background, such as the example shown below? <div id="slider" class="nivoSlider"> <img src="images/slide1.jpg"/> </div> ...

Extract the content of an element and incorporate it into a script (AddThis)

HTML: <div id="file-section"> <div class="middle"> <p class="description"> Lorem ipsum... </p> </div> </div> jQuery: var share_on_addthis = { description: $('#file-section ...

CSS documents are being displayed as type text/plain

My goal is to host my static blog (built with Jekyll) on my Ubuntu server, but I'm encountering a problem where the CSS isn't being applied and I keep seeing this error: "Resource interpreted as Stylesheet but transferred with MIME type text/pla ...

The webpage fails to return to its original position after the script has been executed

My website has a sticky div that stays at the top when scrolling down, but does not return to its original position when scrolling back up. Check out this example function fixDiv() { var $div = $("#navwrap"); if ($(window).scrollTop() > $div.data("top ...

Display additional javascript code for expanding a marquee

Currently, I am working on a stock ticker project using JavaScript. It's progressing well, and now I am focusing on adding a "show more" button to style the ticker. The button should be placed outside of the marquee. When clicked, it will expand the m ...

How to position an absolute element beneath a fixed element

My website is experiencing a problem where the fixed header is overlapping an absolute paragraph on this page. Does anyone know how to resolve this issue? ...

What is the best way to programmatically select a checkbox that was created dynamically using jQuery?

I've been scouring the internet trying to find information on what I'm attempting to accomplish, but so far I haven't come across anything helpful. The issue I'm facing is with a form that has a section dynamically added using JavaScri ...

Android Chrome users experiencing sidebar disappearance after first toggle

Over the past few days, I've dedicated my time to developing a new project. I've been focusing on creating the HTML, CSS, and Java layout to ensure everything works seamlessly. After completing most of the work, the design looks great on desktop ...

Easily validate the contenteditable attribute of <td> element

I am currently working on a table that displays data from a MYSQL database. Whenever a user makes changes to an element in the table, I want the database to be updated using AJAX. Below is my JavaScript code for sending data in an editable row. function s ...

Steps for Converting Unicode Characters to HTML Encoding in C++

Can you assist me with converting unicode characters like the ones below in C++? Thére Àre sôme spëcial charâcters ïn thìs têxt عربى I need to convert them to HTML encoding as shown below: Th&eacute;re &Agrave;re s&ocirc;me sp&am ...

"Utilizing a media query to display an anchor link at the top based

How can I create a "Back to Top" link that automatically scrolls mobile and tablets to the top of the page? Usually, I would achieve this using JavaScript by detecting the window and body height. Is it possible to accomplish this using a media query? @me ...

Creating a Custom Emoji Module

Currently working on creating an emoji component using JavaScript without the React framework. Does anyone know of a comprehensive list containing the unicodes for all emojis? I can successfully display an emoji on the screen by using its Unicode (e.g. & ...