Question regarding CSS text alignment and positioning

Issue at Hand: I am facing a situation where the first element in multiple lists is not perfectly centered like the subsequent elements. In the example provided, the text "Site Map" on the second row is not aligned to center. Any suggestions on how to tackle this?

Here is the HTML snippet:

<body>
<!-- <div class="header">Module Settings</div>  -->
<div class="left_content">      
    <div id="header_nav" class="moduleTypeContent" style="top:-50px" name="header_nav">
        <div class="moduleTypeHeader">          
            <div class="text-center">header_nav</div>                   
        </div>                  
        <ol class="connectedSortable sortable used nonest">                                         
            <li id="list_39">                   
                <div class="listItemContents">                                                          
                    <div class="moduleTypeItem left">
                        <a href="?file=Administration/navigation/index.cfm&deleteModule=39" class="deleteRow"><img src="common/images/icons/shadowed/cross-circle.png" alt="Delete Site Map" width="16" height="16" border="0"  class="icon rightspace" /></a>
                    </div>                                  
                    <div class="moduleTypeItem center text-center">
                        <a href="?file=Administration/navigation/index.cfm&id=39">Site Map</a>
                    </div>                                  
                    <div class="moduleTypeItem right text-center">
                        all
                    </div>                          
                </div>                      
            </li>
            <li id="list_38">                   
                <div class="listItemContents">                                                          
                    <div class="moduleTypeItem left">
                        <a href="?file=Administration/navigation/index.cfm&deleteModule=38" class="deleteRow"><img src="common/images/icons/shadowed/cross-circle.png" alt="Delete Contact Us" width="16" height="16" border="0"  class="icon rightspace" /></a>
                    </div>                                  
                    <div class="moduleTypeItem center text-center">
                        <a href="?file=Administration/navigation/index.cfm&id=38">Contact Us</a>
                    </div>                                  
                    <div class="moduleTypeItem right text-center">
                        all
                    </div>                          
                </div>                      
            </li>                                               
            <li id="list_6">                    
                <div class="listItemContents">                                                      
                    <div class="moduleTypeItem left">
                        <a href="?file=Administration/navigation/index.cfm&deleteModule=6" class="deleteRow"><img src="common/images/icons/shadowed/cross-circle.png" alt="Delete Help" width="16" height="16" border="0"  class="icon rightspace" /></a>
                    </div>                                  
                    <div class="moduleTypeItem center text-center">
                        <a href="?file=Administration/navigation/index.cfm&id=6">Help</a>
                    </div>                                  
                    <div class="moduleTypeItem right text-center">
                        all
                    </div>                          
                </div>                      
            </li>                                   
        </ol>
    </div>
</div>

Furthermore, here's the relevant CSS code:

html, body {
    height:100%
}

body {
    margin: 0px;
    font-size: 12px;
    font-family: Arial;
    font-family: Arial, Verdana, Univers;
    background-color: #f0eff0;
}
ol {
    border: 0 solid #aeaeae;
    border-width: 0;
    margin: 0;
    padding: 0;
    padding-left: 30px;
}
ol.sortable, ol.sortable ol {
    margin: 0 0 0 25px;
    padding: 0;
    list-style-type: none;
}
ol.sortable {
    margin: 4em 0;
}
.sortable li {
    margin: 0 0 0 0;
    padding: 0;
}
.sortable li div  {
    border: 0 solid #aeaeae;
    border-width: 1px;
    padding: 0px;
    margin: 0;
    cursor: move;
}
... (CSS continues) ...

Thank you for your input!

p.s. For those interested, I have created a fiddle: http://jsfiddle.net/earachefl/c2bcc/

csspositioningtext-align

Answer №1

Your method of positioning the right "column" elements is causing them to be pushed down a row due to lack of space on the line they belong. You are then using relative positioning as a workaround to place them where you want. Unfortunately, this results in the text not appearing centered because there is no item in the first line that pushes it to the left.

Consider using a table for a simpler solution. Your current approach showcases poor CSS hacking practices by misinterpreting the rule against using tables for layout. Using a table would be a better option in this scenario.

EDIT: If using a table is not possible, follow these steps:

  • Reposition the "right" column to the first position in the list item
  • Add a right margin to the center column wide enough to accommodate the width of the right column (63px = 50px width + 2 * 6px padding + 1px left-border)

http://jsfiddle.net/Se87U/1/

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

Using a border-radius of 50% is causing imperfect circles to appear in the Chrome browser

Typically, using border-radius: 50% is effective for many situations, and in Chrome it creates a circle appearance. However, when attempting to rapidly rotate a circle in this specific case, an issue arises. Is this a glitch with Chrome's border-radi ...

cssgoogle-chrome

"Ascend beyond the constraints of fixed measurements with dynamic

My JQuery image fader has a width of 100% and height set to auto. I'm thrilled that it works perfectly on the iPhone as well. Now, I am facing a challenge while trying to make content "float" after my JQuery slider. The problem arises because I use ...

csscss-float

The dropdown menu from React Bootstrap is only partially visible when used within the datagrid

They say a picture is worth a thousand words, and what's bothering me now is this predicament: https://i.sstatic.net/UGxyi.jpg I apologize for the blurred text, but I can't disclose much due to company policy... As you can see in the screenshot ...

htmlcssreactjstwitter-bootstrapreact-bootstrap

Immersive Elevation Modal Framework

In my Bootstrap modal, I have a plethora of content, such as: https://i.sstatic.net/o6lm4.png However, the bottom of the modal is experiencing an overflow of height like so: https://i.sstatic.net/qlKrl.png I've attempted utilizing the max-height p ...

cssreactjstwitter-bootstrapbootstrap-modalbootstrap-5

Problem with Button Functionality in Outlook Email

I am having trouble making a specific button for Outlook within my email. Due to the different sections in my EMAIL, the button got wrapped in v:rect and now it is shifting to the top of the email. Can someone assist me with this issue? Actual Image - htt ...

javascripthtmlcssemailoutlook

How to layer a div on top of another using CSS

I have a container div that is styled with CSS properties. When a button is clicked, I need to display a modal overlay with a message. <div class="dvLanding"> <div class="popupArea"> <span class="VoteOnce">You can only vote ...

csshtmlpositionoverlay

Menu Drop on top of Flash player

A challenge I am currently facing is with my live event site and the list of events displayed in a mouseover menu. The issue arises when the flash streaming player remains in front of the mouseover menu, causing interference across all versions of Interne ...

htmlcssflashinternet-explorerflowplayer

Achieving a tidy layout with child divs inside a parent div

I'm struggling to figure out how to arrange objects with margins inside a parent div. Initially, I thought using float would do the trick, but I quickly realized it wasn't the solution. This results in an unsightly amount of space. The divs that ...

htmlcss

HTML5 header video with a subtle color palette

Is there a way to insert a muted video in the header that spans the full width but only has a height of 300px? The issue I am encountering is that when I decrease the height of the video, the width automatically decreases as well. However, what I want is ...

csshtmlbootstrap-4

Bypassing CSS rules for elements not present in the DOM

In case an element is absent from the DOM, I want to include margin space. Conversely, if the element is present, no margin space should be added. I have experimented with CSS for this purpose: A - To ensure there is no margin-top if the H2 title is displ ...

css

Switch the background image in a table data cell using ngIf in Angular

Can you help me with this: I have a td in a table with a background image applied <td background="assets/images/crew/sign.jpg" style="background-repeat: no-repeat; background-size: contain; background-position: center center"> W ...

cssangularhttp

Swapping out a style sheet within a intricate header

I'm in search of help with creating a stylesheet switcher for my website. My knowledge of html/css/js is self-taught, so I ask for forgiveness for any beginner mistakes. I have customized some code to fit my requirements, but I am unsure how to target ...

jqueryhtmlcssstylesheet

Collect information from forms and save it to a mobile phone number

Is it possible to forward form field details to a cell phone number via text message? Here is the code I currently have for sending form data to an email address. If any adjustments need to be made, please provide instructions. <?php if(isset($_POST[ ...

javascriptphphtmlcss

Fixed Sidebar and Dynamic main content with top and bottom sections

Hello, I've been encountering an issue with coding the layout of my website. I want the sidebar to remain fixed regardless of screen size, while also making sure that the content area adjusts fluidly. The header is staying at the top as desired, but I ...

htmlcss

Running a function following the completion of an animation with setTimeout

Recently stumbled upon this cool code snippet on stack overflow http://codepen.io/anon/pen/LERrGG. I see a lot of potential in this pen, but the one drawback is the lack of functionality to execute a function after the timer expires. I've been trying ...

javascriptjqueryhtmlcssjquery-animate

Encountering issues with implementing a sticky header feature for Primeng tables

I'm having trouble implementing a sticky header with p-table in my project. I've followed the CSS provided in the documentation for primeng 7 but it's not working as expected. Can someone please assist me with this issue? Thank you! Below i ...

htmlcssangularprimeng-datatable

Code behind implementing a new System.Drawing.Font

Recently, I have been attempting to generate an image using the Black Rose font in c# but unfortunately, the output does not reflect the desired font. Below is the code snippet I used for creating the image: protected void Page_Load(object sender, Eve ...

c#cssfonts

When the viewport's initial zoom is not set to 1, the values for Vh and Vw

I need an overlay that covers the entire screen. width: 100vw; height: 100vh; The website I'm working on is not responsive and has a fixed width of 1000px. I have set the meta tag as: <meta name="viewport" content="width=device-width" /> Thi ...

cssviewportmetaviewport-units

Tips for setting up date ranges in Fullcalendar

Currently, I am in the process of developing a fire department shift calendar using fullcalendar. I am faced with the task of altering the CSS for specific dates at irregular intervals that do not correspond to typical days of the week. In this particular ...

cssfullcalendar

Issue with Bootstrap 5 navbar dropdown: It opens easily but struggles to close

I am currently using Bootstrap 5 to design a website and have incorporated a dropdown feature into the navigation bar. On desktop, when hovering over the dropdown, it should open, while on mobile, clicking the dropdown should toggle its visibility (open/cl ...

htmlcssfrontendnavbarbootstrap-5