Precise placement of images inside a div container

Could we can tweak the div structure below to center both the image and text horizontally within the container div? Currently, the image is aligned to the left while only the title is centered. Take a look at the code snippet provided: 

.QHeader {
  position: absolute;
  margin-top: 96px;
  margin-left: 0px;
  width: 800px;
  height: 415px;
  background-image: url('../img/bg_blue_rect.png');
  background-repeat: no-repeat;
  background-position: left top;
}
#QHeaderImg01 {
  position: absolute;
  display: block;
  margin: 0 auto;
  margin-top: 72px;
  width: 263px;
  height: 221px;
  background-color: #0F0;
}
.QHeaderTitle {
  position: absolute;
  margin-top: 324px;
  margin-left: 0;
  width: 800px;
  height: auto;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  font-weight: bold;
  color: #000;
}
<div class="QHeader">
  <img id="QHeaderImg01" src="img/q_header_img_01.png" />

  <div class="QHeaderTitle">
    TITLE
  </div>
  <!--QHeaderTitle-->

</div>
<!--QHeader-->

htmlcss

Answer №1

To effectively center your elements horizontally, it is recommended to remove the position: absolute; styling or replace it with position: relative;. This adjustment eliminates the need for absolute positioning in this scenario.

.QHeader {
  width: 800px;
  height: 415px;
  background-image: url(http://placehold.it/800x415);
  background-repeat: no-repeat;
  background-position: left top;
}
#QHeaderImg01 {
  display: block;
  margin: 0 auto;
  width: 263px;
  height: 221px;
  background-color: #0F0;
}
.QHeaderTitle {
  margin-top: 50px;
  width: 800px;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  font-weight: bold;
  color: #000;
}
<div class="QHeader">
  <img id="QHeaderImg01" src="http://placehold.it/263x221/0c0" />

  <div class="QHeaderTitle">
    TITLE
  </div>
  <!--QHeaderTitle-->

</div>
<!--QHeader-->

Answer №2

Simply make this adjustment: 

#QHeaderImg01 {
    position:relative;
}

Also, remove the excessive margin-top from the code.

Answer №3

div.container {
    height: 10em;
    position: relative }
div.container p {
    margin: 0;
   
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}
IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto; 
}
<body>
<div class=container>
<IMG class="displayed" src="http://example.com/image.jpg" alt="...">
  <p>Centered!
</div>

or

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto; 
}

div.container {
    height: 10em;
    position: relative }
div.container p {
    margin: 0;
   
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
 }
<IMG class="displayed" src="http://example.com/image.jpg" alt="...">
<div class=container>
  <p>Centered!
</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

Ways to identify and differentiate various checkboxes using HTML and CSS

I am currently working on implementing a thumbs-up and thumbs-down feature, where clicking on the thumb-up icon will change the color to green, and clicking on the thumb-down icon will change it to red. However, I am facing some difficulties understanding ...

htmlcsscheckboxrating-system

Comparing hardware-accelerated CSS3 animations, transitions, and jQuery animate for mobile devices

While developing my app using PhoneGap and jQuery, I encountered a dilemma regarding animations. Initially, I relied on what I knew best - jQuery animate - to create smooth movements. However, discussions about hardware acceleration caught my attention. ...

cssjquery-animatecss-transitions

Is there a way to quickly add children to a div all at once?

I'm looking for a solution where an element is first replaced with a div, and then that div has some children added using append(): $(el).html('<div></div>').append('<span></span>').append('<span> ...

javascriptjqueryhtmldom

Adjust the background color of a specific list item when hovering over another list item

My dilemma lies in my inadequate knowledge to solve this issue: I have a dropdown menu embedded within a website. (View screenshot here: [SCREENSHOT]) The desired outcome is for the background color of an icon on the main list to change when I navigate to ...

javascriptjqueryhtmlcss

Tips for positioning a Div element in the center of a page with a full-page background

I am trying to center align my div containing login information on the webpage. The static values seem to work fine, but I am looking for a way to position it dynamically. Additionally, the background is only covering a strip with the height of the div... ...

htmlcss

Stop browsers from automatically filling in passwords

It's widely known that major web browsers like Chrome and Firefox no longer respect the standard autocomplete="off" attribute in HTML. Instead, they have implemented their own autofill mechanisms, which has caused some issues for developers. ...

htmlautocomplete

What steps are needed to successfully integrate bootstrap.js, jquery, and popper.js into a project by using NPM to add Bootstrap?

I've successfully set up a project and incorporated Bootstrap via npm. However, I'm facing challenges in loading the necessary javascript files for Bootstrap components. It's important to note that I am utilizing a Vagrant Box (virtual machi ...

javascripthtmljquerycssbootstrap-4

How can I use CSS3 to design a unique custom shape that fits this specific style?

I have some detailed graphs, but I want to display them using CSS shapes. I've been attempting to create css3 shapes that match my graphics (see attached image), but without success. How can I replicate these graphics? https://i.sstatic.net/2pxaW.pn ...

javascripthtmlcss

Clearing the box-shadow effect when collapsing the side bar using a toggle button

I have been struggling with removing the box-shadow from my sidebar when it collapses. I have tried various CSS methods like box-shadow: none;, box-shadow: none !important;, and box-shadow: transparent;. I even attempted changing the color to box-shadow: y ...

cssbootstrap-4togglesidebar

What is preventing my image from moving upwards?

I've been struggling to move this image up, despite trying several methods. I really want it to be aligned horizontally with the PV picture. I need the HP image to be moved directly upwards so that it aligns horizontally with the PV image. This is t ...

htmlimagecss

aligning radio buttons and labels on the same horizontal axis

Is there a way to ensure that radio buttons and their labels appear in the same line? I've tried adding margin and padding properties to the span tag, but it doesn't seem to work. Any suggestions on how to solve this issue? <form class="navba ...

htmlcss

The unique and personalized accordion panel is experiencing technical difficulties

Here is the accordion script I am using: $(document).ready(function(){ $(function(){ // Accordion Panels $(".accordion span").hide(); $(".accordion li").click(function(){ $(this).next(".pane").slideToggle("fast").siblings(".pane:visible").sl ...

phpjqueryhtmlmysql

Having trouble submitting a date input form generated with vuejs on Safari browser

I am a huge fan of Vuejs and it's my go-to at work. The other day, I came across a rather perplexing scenario. If you have any insights into this, please do share. Here is the code in question: <script setup lang="ts"> import { ref ...

javascripthtmlvue.jssafari

Error in JavaScript: Uncaught TypeError - Unable to access the "left" property of an undefined object

This error is really frustrating and I've come across several inquiries regarding this console issue. It's not providing enough information in the chrome console for me to effectively troubleshoot. /** * Adjustment of dropdown menu positio ...

javascriptjquerycssconsole.log

Tips on implementing labels within loops in AngularJS

I find myself within an ng-repeat situation similar to the one below: <li ng-repeat="x in xs"> <form> <label for="UNIQUELABEL">name</label> <input id="UNIQUELABEL"> <label for="ANOTHERUNIQUELABEL" ...

htmlangularjs

Using jQuery, it is possible to eliminate a div element without affecting its contents

<div class="a"> <div class="b"> <ul> <li>Element A</li> <li>Element B</li> </ul> </div> </div> How can I eliminate div class="b" solely? I require the presence of div a, u ...

javascriptjqueryhtml

JavaScript: Deactivate radio buttons based on selected value

Utilizing radio buttons to schedule appointments in a PHP web application is my goal. Presented below is a selection of Radio Buttons, from which the user can pick one. The selected value will be stored in the database as an appointment date and time. &l ...

javascriptphpjqueryhtml

alter the color of the accordion display

Good day everyone, I am seeking help with a Bootstrap query. Here is the HTML code I am working on <!DOCTYPE html> <html lang="nl-NL"> <body> <div class="container-md"> <br> <div c ...

htmlcssbootstrap-5

Having trouble making "jQuery.inArray" function properly in my code

Recently, I made a small interaction where list items are displayed and rotated when clicked - check it out here: http://jsfiddle.net/S79qp/430/ Lately, due to compatibility issues with IE8, I had to switch from using .indexOf() to jQuery.inArray. However ...

javascriptjqueryhtmlinternet-explorer-8

Change the navbar brand in Bootstrap to be hidden on small screens like mobile devices

I am facing an issue with the navbar on my website where it expands in height when viewed on mobile devices due to not fitting into a single line. I have observed that if I remove the brand, it fits perfectly. However, I want to keep the brand visible on l ...

javascripthtmlcssbootstrap-4