How to align a div with a background in CSS to the center

I'm attempting to center a text and an icon, but the icon is set within a background.

How can I center the text and position the icon just to the left of the text?

Here is the link to the fiddle with the code: jsfiddle


<div class="error divError" style="text-align: center">
    <p class="errorplaceholder">Error Text</p>
</div>

.divError {
    background: url("https://www2.eiffel.com/download/images/warning_icon.png") no-repeat scroll left center rgba(0, 0, 0, 0);
    color: #FF0000;
    font-weight: bold;
    margin: auto;
    padding: 5px 10px 5px 25px;
}

Thank you in advance!

htmlcsscss-float

Answer №1

Adjust the p element:

display: inline-block; 
padding: 0 0 0 'your_image_width'; 
background: url('you_image_url') left center no-repeat;

As for the div:

text-align: center;

This solution should do the trick. If not, the concept is clear :).

Answer №2

Utilize the image as the content of the before pseudoelement within your paragraph.
By doing this, you won't need to pre-determine the width of your icon or rely on padding and percentage-based assumptions.

.divError  {
    color: #FF0000;
    font-weight: bold;
    margin: auto;
    padding: 5px 10px 5px 25px;
}

.divError p:before {
     content: url("https://www2.eiffel.com/download/images/warning_icon.png");
}

View an example in a fiddle here: http://jsfiddle.net/8RQfX/6/
For an enhanced vertical alignment with additional code, see: http://jsfiddle.net/8RQfX/6/

Answer №3

fixed

Here is the HTML code snippet:

<body>
    <div class="error divError" style="text-align: center">
        <p class="errorplaceholder">
            <img src="https://www2.eiffel.com/download/images/warning_icon.png" alt="1" /> <span>Error Text</span>
        </p>
    </div>
</body>

And here is the corresponding CSS code snippet:

.divError {
    color: #FF0000;
    font-weight: bold;
    margin: auto;
    padding: 5px 10px 5px 25px;
}

Answer №4

Hopefully this information proves useful.

.divError {
background: url("https://www2.eiffel.com/download/images/warning_icon.png") no-repeat scroll rgba(0, 0, 0, 0);
background-position:45% 50%;
color: #FF0000;
font-weight: bold;
margin: auto;
padding: 5px 10px 5px 25px;
}

Answer №5

To achieve this, consider using position percentages in the background-position property if you prefer having the icon as a background image.

  background: url("https://www2.eiffel.com/download/images/warning_icon.png") no-repeat scroll 40% 50% rgba(0, 0, 0, 0);

These values should work for your needs.

However, I believe it may be more effective to place the icon within a separate span element.

Answer №6

To achieve this effect, consider utilizing the calc property in CSS:

background-position:calc(50% - 40px) center;

For a live example, check out this jsfiddle: http://jsfiddle.net/8RQfX/7/

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

Move the Material UI popover to the clicked icon's position

I am looking to create a popover similar to the image linked below. When the icon is clicked, I want the popover to display with the same user interface. https://i.sstatic.net/yvKjF.png Here is the code snippet that I have been using: {showPopOver &&a ...

cssreactjsmaterial-uipopover

The stylesheet's URL reference to the image is not functioning properly

I'm attempting to showcase images inside a table cell using CSS. Here's what I currently have: HTML: <td class="activity-status status_not_started">Not Started</td> CSS: td.activity-status { font: 0/0 a !important; color: transpar ...

css

The <main> element is not inheriting the height of its parent

https://i.sstatic.net/PchVf.png Using Chrome DevTools, I removed unnecessary elements from the DOM. The body is set to relative and takes up all available space in the document, which is exactly what I want. https://i.sstatic.net/AzELV.png My toolbar i ...

htmlcss

Ways to deactivate a text area or mat-form-field

I need assistance with disabling a form field using Angular (4) + Angular Material and Reactive Forms. I have tried searching for syntax options like disabled="true", but haven't found the correct one yet. Can you please provide me with the right synt ...

htmlangularangular-material

Using JavaScript to generate a <style> element and accessing the cssRules

After spending countless hours trying to solve this problem, I'm hoping that my question isn't too foolish. This is a continuation of a previous question about creating a style tag with JavaScript on Stack Overflow. The solutions provided by Tom ...

htmlcssgoogle-chromesafaristylesheet

Is it possible to display a variety of color schemes in just one console.log()?

My task involves working with an array of hexadecimal values, "colors": ["#d5dd90","#e6bb45","#ef9770"] To log these out in different colors, I used the following method: colors.forEach((value)=>{ console.log(& ...

javascriptcssconsolestylingconsole.log

There is a space above the second div when using display inline-block

I'm encountering an issue with the display inline block property. I have two divs that I want to position next to each other, but there's a strange gap above the second div (#store_header_text) that I can't seem to explain. I've tried r ...

htmlcss

What causes the lower gap to be smaller than expected when using "top: 50%; translateY(-50%);" on specific elements within the parent container?

My top-bar layout needs to have all elements vertically centered, but I'm experiencing issues with the top-bar_right-part not behaving as expected when using the core_vertical-align class. The left menu works fine, however. To illustrate the problem, ...

htmlcsscss-positionvertical-alignmentcss-transforms

Can a Django form be configured to hide submitted values using display:none?

As I was working on submitting a form in Django with multiple details, I came up with the idea to split it into sections. The first set of details would be hidden initially, and upon clicking the next button, the next set of details would be displayed fo ...

htmlcssdjango

Difficulty aligning two images in one div using HTML and CSS

Having trouble with HTML and CSS. I have a div containing 2 images - one for background and the other for an avatar image that I can't seem to center. I've tried using margin:0 auto; and display:block; but it's not working. Current HTML pag ...

htmlcssimagealignment

Ensure that all elements are consistently kept within a DIV container

In my experience with web development, one recurring challenge is ensuring that everything stays contained within a div element. I often encounter situations where multiple nested divs and content cause styling nightmares when elements bleed out of their d ...

htmlcss

Insider's guide to showcasing code in vibrant colors using Python Django

Context: I am currently working on a Python Django web application and need to showcase code snippets in the browser with syntax highlighting. An example of the code snippet I want to display would be: if True: print("Hello World") I am look ...

pythonhtmlcssdjangocolors

Create a duplicate of the table and remove specific rows

Hi there, I have a query about duplicating a table. I am looking to extract specific results and display only those results. To illustrate, here is an example in HTML code: <table class="table table-striped" id="ProfileList2"> <tbody> ...

javascriptjqueryhtml

HTML or JS/jQuery can create disorienting cursor behaviors

Is there a way to create a distorted or crooked mouse movement on a webpage, even though the user is moving the mouse normally? I'm exploring ways to simulate the experience of a Parkinson's or arthritic patient trying to navigate a web page wit ...

javascriptjqueryhtmlcss

Adjust the parent div's background color when a radio button is selected

Is it possible to dynamically change the background color of a div that contains a radio button when the button is checked? Here is an example of the HTML code: <div class="custom-container"> <input id=“example” type="radio" name="opt ...

javascriptjqueryhtml

Incorporate a background image into input fields with Autofill on mobile browsers to override the default yellow background that obscures them

It is common knowledge that modern browsers apply a less than appealing yellow background to text fields when Autofill is used by visitors. A helpful workaround is known to override the default text and background colors, and even incorporate a background ...

htmlcssmobilewebkitautofill

Tips on how to horizontally center align a div when using the flex direction column technique

In my design, there is a container that consists of both a table and a div. The div has its display property set to flex with the flex-direction as column. I am trying to horizontally center align the div within the container. Below is the code snippet: ...

htmlcssflexbox

Insert the URL into either a div or an iframe

It seems like a common issue. I've come across multiple solutions for this problem. using jquery load using iframe I attempted both methods but encountered difficulties in loading content. Specifically, I tried to load google.com and it didn't ...

javascriptjqueryhtmlcss

Is it advisable to avoid using XHTML elements, tags, and attributes that will not be included in the HTML 5 specification?

Given that I am currently utilizing XHTML 1.0 Strict, does it make sense to avoid using XHTML elements, tags, and attributes that are not included in the HTML5 specification? For example: <acronym> and <big> ...

xhtmlhtml

What steps can I take to ensure that the content remains intact even after the page is

Hey there, I hope you're having a great start to the New Year! Recently, I've been working on creating a calculator using HTML, CSS, and JavaScript. One thing that's been puzzling me is how to make sure that the content in the input field do ...

javascripthtmlcss