Align text and image in the middle

I am attempting to center a block of text on a webpage and place an image that is centered both horizontally and vertically within the text block. I do not want to use background-image property for this purpose.

Here is my current implementation, but it doesn't seem to be working as expected.

<div style="font-family: Times; font-size: 12pt; width: 400px; position: absolute; z-index:20; margin-left:auto; margin-right:auto; top: 50px;">
    <img style="position: absolute; z-index:1; top: 20px; margin-left:auto; margin-right:auto;" src="MyImage.jpg" width="202" height="267" />
        <strong>This is my Text. Blah Blah Blah Blah Blah Blah
        <br />
        Blah Blah Blah Blah Blah Blah
        <br />
        Retrieved from:<br />
        Blah Blah Blah Blah Blah Blah
        <br />
        Blah Blah Blah Blah Blah Blah
        <br />
</div>
htmlcss

Answer №1

After reading an article on the topic, I discovered the perfect way to align blocks:

.Center-Container {
  position: relative;
}

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

These CSS styles are crucial! See them in action below:

div {
  font-family: Times;
  font-size: 12pt;
  width: 400px;
  height: 200px;
  z-index: 20;
  margin-left: auto;
  margin-right: auto;
  top: 50px;
  background-color: red;
}
p {
  position: relative;
}
img {
  z-index: 1;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
<div>

  <p>
    B lah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
    Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah

    <br />
    <img src="MyImage.jpg" width="50" height="50" />
  </p>

</div>
You can find more information about this here.

UPDATE

The img tag is now inside the p tag. For more insights, visit Should I put paragraph tags around images?

Answer №2

position: relative;

opting for relative over absolute Check out this example on CodePen

<div style="font-family: Arial; font-size: 14pt; width: 500px; position: relative; z-index:15; margin-left:auto; margin-right:auto; top: 70px;">
<img style="position: absolute; z-index:1; top: 30px; margin-left:auto; margin-right:auto;" src="MyImage.jpg" width="202" height="267" />

 <strong>Here is some Text. Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit
    <br />
    Ut Enim Ad Minim Veniam
    <br />
    Quis Nostrud Exercitation Ullamco Laboris Nisi ut Aliquip
    <br />
    Duis Aute Irure Dolor in Reprehenderit in Voluptate Velit Esse Cillum Dolore Eu Fugiat Nulla Pariatur
    <br />
 </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

Define the position of a scrolled area within an HTML document to create a

In my current project, I have a scrollable area that highlights the selected div in gray. The HTML is written using Ember (hbs) and includes code to handle this functionality. Below is an example of how the div looks: https://i.sstatic.net/T2Lur.png Here ...

javascripthtmlcssember.js

Tips on attaching a click event listener to Nav.Link component in React Bootstrap

return ( <Navbar bg="dark" variant="dark"> <Navbar.Brand href="/">Instagram</Navbar.Brand> <Nav className="mr-auto"> <Nav.Li ...

htmlreactjsreact-bootstrap

Customize the height of individual carousel items in Primeng carousel

Hey there, I'm currently using the primeng carousel component and running into an issue where the carousel height is always based on the tallest item. I am looking to have an automatic height for each individual carousel item instead. Do you think th ...

htmlangularprimeng

Showing a tooltip in Angular when a button is disabled

<button [disabled]="(!dataConceptSummmaryFlag || dataConceptSummmaryFlag === false) && (!selectedLOBFlag || selectedLOBFlag === false) && (!adsListFlag || adsListFlag === false)" class="lmn-btn lmn-btn-primary" ...

javascripthtmlcssbootstrap-4angular-material

What is the best way to incorporate tooltips in SVG?

My teacher wants me to display a tooltip on an SVG circle with links and information when we hover over it. They suggested using jQuery UI, but I've done extensive research and nothing has been able to assist me so far. ...

javascripthtmlcss

What is the best way to implement two distinct global CSS styles for separate pages in Next.js?

I'm looking to give my website a fresh look by creating two different global CSS styles. Is it possible to use one CSS style for the old pages and another for the new pages? ...

cssreactjsnext.js

Divide words onto separate lines and shift them out of place

I'm tackling the challenge of crafting a basic tooltip without relying on JavaScript. I'm pondering the most effective approach to achieve this. I aim to have the tooltip container accommodate dynamic text seamlessly, adjusting responsively atop ...

htmlcss

The Bootstrap form fails to function properly on mobile devices

On my Bootstrap form, everything works fine when entering data on the desktop version. However, I am facing an issue with the mobile version where I cannot input any information into the fields. The fields are unresponsive and not allowing me to enter an ...

htmlformstwitter-bootstrap

The issue arises when trying to set the height of the modal body correctly while using ng-bootstrap to open the modal as a separate component

There seems to be an issue with the height not being properly added in the modal body when the modal is opened as a separate component using ng-bootstrap. The problem can be seen in the following link: https://i.sstatic.net/natkn.png https://stackblitz.co ...

htmlcssangularbootstrap-5ng-bootstrap

Using Angular Material to create tabs and grid lists (md-tabs and md-grid-list

I'm having trouble getting the md-grid-list to appear inside an md-tab. I copied the md-grid-list code from here and placed it under a series of dynamically generated tabs. However, the grid list doesn't seem to be displaying on any of the tabs ...

cssangularjsmaterial-design

Combining different HTML table borders

Here is some example code: <!DOCTYPE html> <html> <body> <h4>Creating a table with nested tables:</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td> </td> < ...

htmlcsshtml-table

Tips for designing a CSS Grid that features a maximum width for the main content and a minimum width for the sidebar

I'm attempting to design a two-column CSS grid with a main content area that has a maximum width of 800px and a sidebar that has a minimum width of 200px: https://codepen.io/dash/pen/gOmXqGr The grid needs to be responsive: The yellow sidebar should ...

htmlcsscss-grid

Interacting with JQuery UI Button causes it to shift position on mouseover

In my table, there are two large cells. The left cell contains two drop-downs and a JQuery UI button that is causing trouble, while the right cell displays a list generated from an AJAX database query. As the list grows longer, the button gradually moves u ...

jqueryhtmlcssajax

Refresh the CSS without having to reload the entire page

I am working on a web page that operates on a 60-second timer. The code snippet below is responsible for updating the content: protected void RefreshButton_Click(object sender, EventArgs e) { ReportRepeater.DataBind(); ReportUpdatePane ...

c#asp.netcssupdatepanel

Tips for aligning text alongside ons-select elements

I am working with the following HTML snippet: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css"> <link rel="stylesheet" href="https://u ...

htmlonsen-ui

I'm confused as to why the CSS Bottom property is causing the top edge of the div to align with the bottom of the document rather than the bottom edge

My challenge is to align an image slideshow on top of my footer, with the bottom edge of the slider touching the top edge of the footer. Despite using position: fixed and bottom: 0 properties, it appears that the positioning is off - aligning the top edge ...

jqueryhtmlcss

Trouble with Fancybox 2 and CSS classes not applying correctly

Despite my previous successful experiences with fancybox, I am currently facing an issue where the CSS styling is not being applied as expected. The large images appear grouped correctly, but without any styling, causing them to shift to the right after ap ...

jquerycssfancyboxfancybox-2

What is the best way to create a full-width gallery display?

I've been having some trouble making my image gallery full-width at any resolution. Oddly enough, the gallery only goes full screen when I click on the maximize button in the browser window. I can't seem to figure out what the issue is so far. ...

javascripthtmlcsswidthgallery

The confirmation dialogue is malfunctioning

Need some assistance with my code. I have a table where data can be deleted, but there's an issue with the dialog box that pops up when trying to delete an item. Even if I press cancel, it still deletes the item. Here is the relevant code snippet: ec ...

javascriptphphtmlmysql

What is the best way to retrieve both the checked and unchecked values from a collection of checkboxes?

Check Out This live Example: I am in the process of creating a list of checkboxes with various data objects: data = [ { Key: "class_id", displayName: "Section ID", enabled: true }, { Key: "room_l4", displayName: "Location", enabled: false }, { Key: "se ...

javascripthtmlangulartypescript