Tips for Aligning h5 Headings with Unordered Lists

My footer contains the following code:

HTML:

<div class="container">
<div class="row">
        <div class="col-md-6">
            <div class="pull-right">
                <h5><u><i>Information</i></u></h5><br />
                <ul style="list-style-type: none;">
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Location</a></li>
                    <li><a href="#">Work with Us</a></li>
                    <li><a href="#">Press</a></li>
                </ul>
            </div>
        </div>
        <div class="col-md-3">
            <div class="pull-right">
                <h5><u><i>Social Links</i></u></h5><br />
                <ul style="list-style-type: none;">
                    <li><a href="#"><img class="imgFooter" src="~/Content/img/Social/fb.jpg" alt="FB" /></a></li><br />
                    <li><a href="#"><img class="imgFooter" src="~/Content/img/Social/twitter.png" alt="Twitter" /></a></li><br />
                    <li><a href="#"><img class="imgFooter" src="~/Content/img/Social/Linkedin.png" alt="LinkedIn" /></a></li>
                </ul>
            </div>
        </div>

Having some trouble centering the text in h5 against ul using CSS styling. Text-align works only for the first ul (based on a's length of text).

https://i.sstatic.net/hBFyG.png https://i.sstatic.net/GTNQJ.png

Thank you in advance.

htmlcsstwitter-bootstrap

Answer №1

Eliminate the inline style style="list-style-type: none;" from ul and incorporate the bootstrap class list-unstyled to reset the default ul style, including margin, padding, then add the text-center class to the parent element to center all child elements.

<div class="container">
<div class="row">
        <div class="col-md-6 text-center">
            <div class="pull-right">
                <h5><u><i>Information</i></u></h5><br />
                <ul class="list-unstyled">
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Location</a></li>
                    <li><a href="#">Join Us</a></li>
                    <li><a href="#">Press</a></li>
                </ul>
            </div>
        </div>
        <div class="col-md-3 text-center">
            <div class="pull-right">
                <h5><u><i>Social Media</i></u></h5><br />
                <ul class="list-unstyled">
                    <li><a href="#"><img class="imgFooter" src="~/Content/img/Social/fb.jpg" alt="FB" /></a></li><br />
                    <li><a href="#"><img class="imgFooter" src="~/Content/img/Social/twitter.png" alt="Twitter" /></a></li><br />
                    <li><a href="#"><img class="imgFooter" src="~/Content/img/Social/Linkedin.png" alt="LinkedIn" /></a></li>
                </ul>
            </div>
        </div>
  </div>
</div>

Live Demo

Answer №2

How about aligning the text in the center for both elements?

.pull-right h5,
.pull-right ul{
    text-align: center;
}

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

Tips for aligning a custom icon to the left in a Jquery mobile header

I have successfully implemented a custom icon in the header, but it is currently displaying in the center. How can I adjust it to be positioned on the left side instead? <div data-role="header" data-theme="a"> <h3> ...

jqueryhtmlcss

Preventing empty submissions through contact form validation

While I'm not well-versed in php/js, I'm currently attempting to create a custom contact form within Wordpress. After following various tutorials and researching extensively, I have successfully configured the form to send its contents to my emai ...

phphtmljqueryajaxwordpress

Enhancing the visual appeal of a javascript canvas animation

I am facing a small issue and I want to incorporate an animation from: http://codepen.io/chuckeles/pen/mJeaNJ My main query is how can I modify it so that instead of dots, there would be small images? Which part of the code should I edit for this purpose? ...

javascriptjqueryhtmlcsscanvas

Enhancing the KeyValuePair by incorporating additional value or parameter

I currently have a List<KeyValue<string, int>> that I utilize in the View of one of my applications. While it functions as intended, I am interested in expanding it by potentially incorporating an additional parameter/value to the KeyValue pair ...

c#cssasp.netasp.net-mvcgenerics

Can I create personalized animations using Compass?

I am curious about how to convert this code into Compass mixins @-webkit-keyframes shake { 0% { -webkit-transform: translate(2px, 0px) rotate(0deg); } 10% { -webkit-transform: translate(-1px, 0px) rotate(-1deg); } 20% { -webkit-transform: tran ...

csssasscompass-sasscss-animations

Manipulating div position interactively with vanilla javascript during scroll

I'm trying to create an effect where an image inside a div moves vertically downwards as the user scrolls, stopping only at the end of the page. I've attempted a solution using a script from another post, but it doesn't seem to be working. ...

javascriptjqueryhtmlcssscroll

Animating divs one by one using CSS3 with delays

I am experimenting with animating three separate divs one by one, each moving down 50px as a test. Here is the SCSS code I am using: .action { margin: 20px 0; text-align: center; transform: translate(0,0); transition: ...

jqueryhtmlcss

Adding an image to a server through PHP in the TinyMCE editor

Currently, I am in the process of utilizing TinyMCE text editor for uploading images using PHP and JS database. However, I find myself perplexed when it comes to sending the image to the server. Below is the snippet of the JS code being used: <script ...

javascriptphphtmlcsseditor

Is it possible to activate multiple animations simultaneously within a single div using UIKit?

I recently started developing a to-do web application and was looking to enhance its appearance with some animations using UIKit. Currently, I have an animation that toggles when the todo-items are brought into view: <div class="todo-items uk-anim ...

javascripthtmlvue.jsanimationuikit

Set the background image width to 75% of the screen size

I want to use this image https://i.sstatic.net/gt30c.jpg as a background for a section on my page. My preference is to have the white part cover only 75% of the screen, stopping before reaching the content in the left grid. Is it possible to achieve this ...

htmlcsstwitter-bootstrap

What is the most effective method for incorporating a floating section next to a Susy gallery?

Check out my latest progress on the codepen here The number of items displayed in the gallery is dynamic based on search results. However, I am looking to add a fixed area to the right side that remains visible as the user scrolls through the gallery. Ess ...

htmlcsssasscompass-sasssusy

"Angular File Upload Made Easy with Drag-and-Drop Functionality and Cleverly Positioned

Encountering an issue with Angular File upload in conjunction with relatively positioned elements. The drop target is set to 100% width and height, absolutely positioned. While dragging a file over any non-relatively positioned element, the overlay functio ...

javascripthtmlcssangularjsangular-file-upload

Improving the method for adding an element to an HTML document with jQuery

What is the best way to add this element to a specific DIV Class using JQUERY in an optimized manner? The elements are generated dynamically and I want to use .AppendTo to display them inside <div class='parent-list-workorder'>. This is wh ...

javascriptjqueryhtmlcssajax

What is the best way to position a <label> to the left of an <input> field?

Examining the HTML and CSS code below: * { box-sizing: border-box; } .field { overflow: auto; } .field label { float: left; width: 80px; } .field input { display: block; width: 100%; } <div class="field"> <label>Test< ...

cssformscss-float

Creating an interactive bootstrap modal: a step-by-step guide

For instance, I have 3 different tags with unique target-data for each one. <a class="btn btn-outline-primary btn-sm" href="#" data-toggle="modal" data-target="#firstdata"> DATA 1 </a> <a class=&q ...

javascriptphphtmlbootstrap-4

The RSS feed is stretching beyond the limits of the table's height

Seeking assistance to adjust the height of an RSS feed widget on my website. The widget is from RSS Dog and I do not have access to the style.css file as it is hosted externally. Despite trying to modify the JavaScript code provided by RSS Dog to set the h ...

javascripthtml

Utilizing jQuery to retrieve multiple values from a select box through the onchange event

I have two select boxes with JavaScript on them. When I use filter1, my URL changes to www.url.com/&filter[]=6827 and it works perfectly. The selected option also works without any problems. However, I want a new select box like filter2 with multiple f ...

javajqueryhtmldrop-down-menujquery-selectbox

Chrome does not support CSS animation rotation over 360 degrees

After researching for hours, I've encountered an issue with my animation in Chrome. It seems that while transform: rotate(1080deg); works flawlessly in Firefox, it fails to rotate in Chrome. Surprisingly, I discovered that it only rotates in Chrome wh ...

csscss-animations

Using AJAX to submit a form and then refreshing the page within the current tab

I am facing an issue with my web page that contains multiple tabs, some of which have forms. Whenever a form is successfully submitted, the page reloads but always goes back to the default first tab. To address this, I am attempting to use a storage variab ...

javascripthtmljqueryajaxforms

Positioning a button at the center-right

I'm currently in the process of creating a coming soon website, which you can find hosted here. However, I am having some trouble aligning the button correctly. My goal is to have it positioned to the right of the text field. How can I achieve this? ...

htmlcss