Place an image in the middle of a div with text aligned to the right side

Question

Place an image in the middle of a div with text aligned to the right side

How do I center an image within a div that has text on the right side? The page layout is based on percentages and I want the image to be perfectly centered with the text floated to the right.

This is what I currently have:


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


<div id="logoDiv">
   <p class="bold marginleft5 floatright paddingtop60">Logout</p><p class="floatright paddingtop60">Hello Bill</p>
   <img alt="Logo" src="~/Content/Images/logo.png" class="logo" height="80" width="245" />
</div>

I know that if I move the text to the next line, the logo will be centered. Is there a way to keep them on the same line?

javascript css html

Answer 1

Answer №1

To achieve a floating effect, one could utilize absolute positioning and adjust the top and right properties accordingly.

img.logo {
    display: block;
    margin: 0 auto;
}
.floatright {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    margin-right: 8px;
    text-align:right;
}
.line1 {
    top: 0px;
}
.line2 {
    top: 16px;
}
.bold {
    font-weight: bold;
}

<div id="logo-div">
    <p class="bold floatright line1">Logout</p>
    <p class="floatright line2">Hello Bill</p>
    <img alt="Britannia Logo" src="~/Content/Images/logo.png"
        class="logo" height="80" width="245" />
</div>

Answer 2

To achieve a floating effect, one could utilize absolute positioning and adjust the top and right properties accordingly.

img.logo {
    display: block;
    margin: 0 auto;
}
.floatright {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    margin-right: 8px;
    text-align:right;
}
.line1 {
    top: 0px;
}
.line2 {
    top: 16px;
}
.bold {
    font-weight: bold;
}

<div id="logo-div">
    <p class="bold floatright line1">Logout</p>
    <p class="floatright line2">Hello Bill</p>
    <img alt="Britannia Logo" src="~/Content/Images/logo.png"
        class="logo" height="80" width="245" />
</div>

Answer 3

Answer №2

Here is a way to achieve it:

.logo {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

Feel free to see it in action at: CodePen

Answer 4

Here is a way to achieve it:

.logo {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

Feel free to see it in action at: CodePen

Answer 5

Answer №3

If you're looking for a responsive solution that adapts to both wide and narrow screens, check out this code snippet: http://codepen.io/mysite/pen/qwerty

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8>
<style>

.logoContainer {
    width: 100%;
}

.logo {
    text-align: center;
    position: absolute; 
    left: 0; 
    right: 0; 
}

.content {
    width: calc(50% - 130px); 
    float: right;
}

</style>
</head>
<body>

<div class="logoContainer">
    <div class="content">
      <p>Sign Out</p>
      <p>Hello there</p>
    </div>
    <div class="logo">
       <img alt="My Logo" src="http://placehold.it/245x80" height="80" width="245">
    </div>
</div>

</body>
</html>

Answer 6

If you're looking for a responsive solution that adapts to both wide and narrow screens, check out this code snippet: http://codepen.io/mysite/pen/qwerty

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8>
<style>

.logoContainer {
    width: 100%;
}

.logo {
    text-align: center;
    position: absolute; 
    left: 0; 
    right: 0; 
}

.content {
    width: calc(50% - 130px); 
    float: right;
}

</style>
</head>
<body>

<div class="logoContainer">
    <div class="content">
      <p>Sign Out</p>
      <p>Hello there</p>
    </div>
    <div class="logo">
       <img alt="My Logo" src="http://placehold.it/245x80" height="80" width="245">
    </div>
</div>

</body>
</html>

Place an image in the middle of a div with text aligned to the right side

Answer №1

Answer №2

Answer №3

Similar questions

Trigger oncopy on the body excluding specific class

Steps for encoding a CSV export with HTML:

Switch website address without redirecting via JavaScript

Mastering the Art of Incorporating jQuery, JavaScript and CSS References into Bootstrap with ASP.NET WebForms

The custom icon font sourced from Flaticon and hosted on a separate server is not functioning properly

Unable to establish React API communication on cloud-based IDE for MERN Stack development

View the edited image preview instantly upon selecting the image

Incorporating .txt files into a static webpage using only HTML and JavaScript

How can I personalize the HTML code of images added to my WordPress articles?

Overlapping borders create a unique style for bootstrap labels

Differences in Print Layout Between Chrome and Firefox when Viewing a PHP Website

Retrieving Google Maps Geocoding JSON through an Express API

Can I simultaneously execute nodemon and browser-sync using a single npm script for an Express application?

Bigcommerce encounters a 401 error during the payment processing, triggered by API with error code 10001

Using Vue.js to detect changes in a value and dynamically highlight the text

What is the process for inserting a scroll bar within a div element?

Using Angular to store image data with base64 encoding for improved caching efficiency

I've been attempting to develop a React application, but I consistently encounter the following error: "npm ERR! cb() function was never invoked!"

Creating a customized list item design using Bootstrap 3 and incorporating div elements

Overriding the Ajax URL