Aligning an icon vertically with wrapped text using CSS

My task involves reformatting predefined HTML using CSS to achieve a different layout. The HTML is received as an error message from the server and is not editable.

.server-errors ul {
  list-style: none;
}
.server-errors li:before {
  content: "D";
  font-family: "pictos";
}
<div class="server-errors">
  <ul>
    <li>
      <label>Server error message goes here.</label>
    </li>
  </ul>
</div>

The objective is to present this information without the <li> dot and instead replace it with a different character (pictos) that is aligned to the left and vertically.

I have successfully displayed the character but am struggling to align it properly as a separate entity.

Desired Output: 

---------------------------------------
-         Long error message goes     -                                     
-    X    here and it will span       -
-         three lines                 -
---------------------------------------

Current Output: 

---------------------------------------
- X Long error message goes here and  -                                     
-   will span three lines             -
-                                     -
---------------------------------------

I am unsure about the specific changes I need to make or which parts of the CSS to modify in order to achieve the desired effect.

htmlcss

Answer №1

If you're looking to create a responsive layout, CSS3 flexbox is a great tool to use.

.server-errors li {
  align-items: center;
  display: flex;
}

Check out the output image below:

https://i.sstatic.net/mS02b.png

.server-errors ul {
  border: 1px solid black;
  list-style: none;
  padding: 10px;
  width: 150px;
}
.server-errors li {
  align-items: center;
  display: flex;
}
.server-errors li:before {
  margin-right: 10px;
  content: "D";
  font-family: "pictos";
}
<div class="server-errors">
  <ul>
    <li>
      <label>Long error message goes - - X here and it will span - - three lines</label>
    </li>
  </ul>
</div>

Answer №2

Flexbox can be utilized in this scenario:

.error-messages li {
  display: flex;
  align-items: center;
}

Alternatively, you can opt for CSS table-cell which has better browser compatibility:

.error-messages li:before,
.error-messages li label {
  display: table-cell;
  vertical-align: middle;
}

Answer №3

.container {
            width: 300px;
            display:flex;
        }
        li {
            list-style: none;
        }
        .left {
            width: 10px;
        }
        .right {
            width: 100px;
            display:flex;
            justify-content:center;
            align-items:center;
        }
        .container * {
            line-height: 30px;
        }
        .info {
            display: flex;
            justify-content: center;
            align-items: center;
        }
<body>
    <div class="error-messages">
        <ul>
            <li>
                <div class="container">
                    <div class="left">
                        <span>-</span>
                        <span>-</span>
                        <span>-</span>
                    </div>
                    <div class="right">
                        X
                    </div>
                    <div>
                        Long error message goes here and it will span three lines
                    </div>
                    <div class="left">
                        <span>-</span>
                        <span>-</span>
                        <span>-</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</body>

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

Disappearing input field in DateTimePicker Bootstrap when blurred

Currently, I am utilizing the Bootstrap DateTimePicker plugin to enable users to select a specific date and time. The plugin functions well with one minor issue - whenever the user clicks outside or loses focus on the calendar box, both the box itself and ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for turning off the auto save password option on browsers for user registration forms

Is there a way to prevent browsers from saving passwords on the add users form? I've tried using autocomplete="off" but it doesn't seem to work for saved passwords. I've searched extensively for a solution but haven't found the right on ...

javascriptjqueryhtml

Challenges Arising from Creating an EPL Trivia Game with HTML and Javascript

Having some issues with this game functioning properly. Trying to create a dropdown menu that lists 20 EPL teams, and upon selecting a team, display that team's information in a form. Unfortunately, I'm encountering difficulties with the code. An ...

javascripthtml

When a class and ID are dynamically applied, the click event may not fire and the CSS may not be applied

Hey everyone, I am facing an issue with declaring id and class when creating a table dynamically. I have tried multiple functions to make my click event work but without success. Can anyone help me with this? Below is the code for my dynamic table where I ...

javascriptjquerycssdynamicclick

What is the best way to assign a percentage width based on a variable in jQuery?

Is there a way to assign a dynamic width value to an element? Here is the code I am using: $(".menu_list_item").css({ width: width + "%" }); Unfortunately, this doesn't appear to be functioning correctly. If anyo ...

javascriptjquerycss

Looking for assistance in adding some animated flair to your website as users scroll

I don't have much experience in animation but I would like to create some animation effects on scroll down. Can anyone provide suggestions? I attempted using SVG paths, but it didn't work out as expected. What I am aiming for is that when a visi ...

javascripthtmljqueryanimationsvg-animate

Accessing Django static files is proving to be difficult

I recently set up a django project and attempted to integrate an HTML template. Unfortunately, I encountered an issue when trying to access files in the static folder. Below is my current configuration: #BASE_DIR = os.path.dirname(os.path.dirname(os.path ...

pythonhtmldjango

Add a decorative frame around the heading and text block

I'm looking to encase both the header and paragraph in a single border. Right now, they each have their own separate borders. How can I combine them into one? <style type="text/css> h1, p { font-family: consolas; border: 2px solid #73AD21; bor ...

htmlcss

Elevate a div over another div

I have a situation where I need to nest two divs inside another div with the ID "video-wrapper". Here is the HTML code: <div class="row"> <div class="video-wrapper col-lg-2"> <div class="video-thumbnail"> <img ...

jqueryhtmlcss

Encountering an Issue with Incorporating Multiple SCSS files in Jekyll

Currently, I am in the process of developing a website using Jekyll. My goal is to incorporate multiple SCSS files into the project. Although I successfully added a main file, I have encountered some difficulties with additional files. Here is my director ...

csssassjekyll

What steps should I take to ensure that this website is responsive across all screen sizes?

Struggling with adapting to different screen sizes, especially with Bootstrap. Below are the images for reference: https://i.stack.imgur.com/AlCjA.png https://i.stack.imgur.com/FT2mU.png Sass source code snippet: body background: $main-background ...

htmlcsssass

Tips for handling null input values when saving to a database

<!DOCTYPE html> <html> <head> <title>Data</title> </head> <body> /* Enter your data here */ <form action="this.php" method="post"> <input type='text&a ...

phphtmlcssmysqldatabase

The hover effect in CSS animations is turned up too high

Check out my Reddit news feed design: https://codepen.io/Teeke/pen/YxXXaE When hovering over articles, the headlines get displayed. But if the article text is too long, part of the headline may go off-screen. Instead of changing the line-height, I' ...

csssass

Determining the Missing Focus: Discovering the Vacant '":focus'" in Jquery

I am currently working on jQuery and facing an issue with input fields that have assigned ID's and attached .blur() events. I am struggling to identify the specific item that has gained focus: $("#"+field).blur(function() { console.log ($(this).attr ...

jqueryhtmlcss

Tips for creating animations with JavaScript on a webpage

I created a navigation bar for practice and attempted to show or hide its content only when its title is clicked. I successfully toggled a hidden class on and off, but I also wanted it to transition and slide down instead of just appearing suddenly. Unfort ...

javascriptcss

Having Trouble with Bootstrap 4: "Encountering Uncaught Error: Tooltip Transition in Progress"

I'm currently utilizing Bootstrap 4 on my website and incorporating the Tooltip feature. While my JavaScript appears to be correctly formatted, there are instances where I encounter errors in Console. My Javascript Setup | Bootstrap 4 <script src ...

javascriptjqueryhtmlcsstwitter-bootstrap

Unveiling the Technique: Adjusting Field Visibility When Dropdown is Altered

I tried to find a solution on Stackoverflow for displaying/hiding a field based on dropdown selection using either jQuery or inline JavaScript. However, I am facing difficulties when implementing this within a table. Let's start with an easy approach ...

javascriptjqueryhtmlcss

Ways to align grid components at the center in MUI frameworks?

I am brand new to using MUI and currently experimenting with the grid functionality. <Grid className={classes.grid} container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}> {data.data.map((item, index) => { ...

cssmaterial-ui

Tips for validating a form's input on an ajax page with the help of jQuery

I am facing an issue with a form containing two inputs. The first input can be validated before triggering an ajax function, but the second input cannot be validated. The second input is loaded from a page using ajax, along with the submit button. I need t ...

javascriptphpjqueryhtmlajax

The "label for" functionality does not activate the control

<form> <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female">Female</label> <input type="radio" name="sex" id="female" /> </form> I am cu ...

htmllabel