Ensuring the alignment of the vertical centers of icons and text within the .row class

Having some trouble with the basics again, but this time I'm stuck trying to figure out how to align an icon and "Feature 1" at the top and center of the page, as shown in the image (with the cyan lines), followed by a random paragraph.

<body>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="top-align text-center">
            <i class="fa fa-paper-plane-o"></i>
            <h3>We're Creative</h3>            
            </div>
            <p class="text-center">Lorem ipsum dolor sit amet<br>
            Lorem ipsum dolor sit amet<br>
            Lorem ipsum dolor sit amet<br>
            Lorem ipsum dolor sit amet</p> 
        </div>
    </div>
</div>    


</body>

CSS3

.top-align{

display:inline;

}

I attempted to fix this issue by creating custom CSS and using separate div tags for the icon and paragraph, setting them to display inline, but unfortunately, it didn't work as expected. You can view the live version here.

csshtmltwitter-bootstrap

Answer №1

It appears that Bootstrap and Font Awesome are being utilized in your project, so I have incorporated them in my fiddle as well.

Check out the fiddle here

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="text-center">
          <i class="fa fa-paper-plane-o"></i>
          <h3 style="display:inline;">We're Creative</h3>
        </div>
        <p class="text-center">Lorem ipsum dolor sit amet<br>
          Lorem ipsum dolor sit amet<br>
          Lorem ipsum dolor sit amet<br>
          Lorem ipsum dolor sit amet</p>
      </div>
    </div>
  </div>
</body>

Answer №2

Your container div should not have display: inline. An inline element will appear as if it is a character in a word - each character is considered an inline element. A <span> by default has display: inline - it occupies the next available space on the line.

Once the container div.top-align has display: inline removed, set the h3 to have a display property of inline or inline-block. Either will work. This will allow the icon and h3 to function as two adjacent words and they will align to the center as specified by the container div's text-align: center property.

Alternatively, you can achieve this without a container div around the icon + h3. The icon is inherently displayed as inline-block. Place the icon's span inside the h3 and it will always display as a single unit, as if the icon were a word in the h3. Because the icon is enclosed in a span, you can still target it individually if necessary. Here's a demonstration showing how to do this: Incorporating your icon into your heading (I took your code and commented out what is no longer needed so you can observe the changes.)

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

Guide: Using jQueryUI's explode effect to animate an HTML element explosion

I'm having trouble getting the jQueryUI explode effect to work properly. I've tested it out on this jsfiddle, but the explosion effect doesn't seem to happen as expected - the element just disappears with no explosion animation. $('h1, ...

javascriptjquerycssjquery-uijquery-effects

Challenges with Implementing Background Images on my Website with HTML and CSS

Being new to the world of coding, I recently created a website for a college presentation. However, after uploading the website onto the internet, I noticed that the background images from my files are not displaying on the website. It's likely that I ...

htmlcss

How to locate the position of a specific word on a webpage using jQuery

In my div, I am struggling to search like an editor. Despite multiple attempts, I have not found a solution yet. Can someone please advise me on how to resolve this issue? <div id="content"> <p> Lorem Ipsum is simply dumm ...

javascriptjqueryhtml

Stylish date picker in CSS

Here is a design mockup along with my current solution. The issue arises when two numbers are adjacent to each other (either horizontally or vertically) as they should merge, illustrated in the mockup below. For example, when selecting numbers 48-49-50, t ...

jquerycss

Reloading a webpage does not clear HTML tables containing jQuery interactions in Firefox

Apologies if this question has already been asked. I incorporated hide/unhide features using jQuery into a simple HTML table. The table functioned correctly in Chrome 24.0.1312.52 m and IE8+. Yet, upon refreshing the page in Firefox 15.0.1, the pr ...

jqueryhtmlfirefox

When editing html files in Vim, the javascript indent filetype plugin is sourced unexpectedly

After experimenting with my vim settings, I noticed an unexpected behavior. When editing html files in vim, both the indent/javascript.vim and indent/html.vim filetype plugins seem to be sourced simultaneously. Is this intentional or a bug? How can I ensur ...

htmlvimindentationvim-pluginneovim

In the event that conflicting media queries take precedence over one another

I developed a set of queries for a particular element on a landing page. Here is the HTML structure: <div class="hsContent"> <article> This is my amazing content. Wow! </article> </div> This is how the initial styling looks fo ...

htmlcssmedia-queries

Applying CSS to an iframe using JavaScript: A Step-by-Step

I have an Iframe editor and I am trying to change some CSS inside the editor. However, when I attempt to apply the CSS, it does not affect the styles within the Iframe. <div id="editor" style="flex: 1 1 0%;"> <iframe src="https://editor.unlay ...

javascripthtmlcssreactjsdom

Error 404: Troubleshooting an Azure Issue with Custom TrueType Font in .NET MVC 5

I am encountering an issue that has been previously addressed. Despite implementing the suggested solutions, the problem persists. In an effort to enhance my project, I downloaded two custom ttf fonts called Monterey and Bakery. Both fonts have been succ ...

cssasp.net-mvcvisual-studioazurefonts

the failure of the second function to execute

Struggling with a particular issue. Two functions have been created as shown below: function limit_char_normal(textid, limit, infodiv){ var text = $('#'+textid).val(); var textlength = text.length; if (textlength > limit) { ...

javascriptjqueryhtml

The setTimeout function within the map function does not output any JSX element

I have been pondering the possibility of creating animated buttons using setTimeout on map elements. As I delve into learning React Transition group, I came up with this code snippet: function NavItemSub(props) { const array1 = props.array1; return ( ...

cssjsxsettimeoutmap-function

Implementing a click event on an image in an Angular 4 application

I'm facing an issue with adding a click event to an image within an Angular component. I have tried the following code: <img src="../../assets/add.svg" width="18" height="18" (click)="addItem()"> However, this approach does not seem to work as ...

htmlcssangular

Dynamic collapsible containers

I discovered a useful feature on w3schools for collapsing elements: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_symbol However, I would like to reverse it so that all elements are initially shown when the page loads, and then ...

javascripthtmlcss

Is it possible to highlight only a specific color on the div background?

I'm trying to create a layout similar to this: https://i.sstatic.net/dZ1ka.png I've managed to get most of it working, but I'm struggling with the yellow rectangle that spans the background of the screen. Currently, it looks like this: https ...

htmlcssreactjs

Is There a Glitch in IE9? Unexplained Expansion of DIV Element

Here is a small code sample that I have: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Test</title> <style type="text/css"> table.Sample { width: 600px; table-layout: fixed; } table.Sample ...

csshtml

How to prevent the scroll bar from affecting a fixed div located at the top of the page

Check out this website: I am struggling with setting up a fixed menu div at the top and a content div below it on my site. I want the scroll bar to only apply to the content div and not the header div at the top, but I can't seem to figure out how to ...

htmlcssscrollbaroverflow

Is it possible to programmatically hide the Textarea and submit button for each row in a PHP-generated database table?

After spending a considerable amount of time on this project, I'm looking to incorporate a JavaScript effect (hide/unhide) into a basic submit form. Although the functionality is successful, it seems to be limited to only one row in the database tabl ...

javascriptphphtmlmysql

JavaScript is failing to update the table values as users interact with it

I've created an HTML table and used PHP to populate the values. The goal is to allow users to update order statuses with a status and message input. Initially it works fine, but after multiple uses, it either updates the wrong row or doesn't up ...

javascriptphphtml

Removing background color and opacity with JavaScript

Is there a way to eliminate the background-color and opacity attributes using JavaScript exclusively (without relying on jQuery)? I attempted the following: document.getElementById('darkOverlay').style.removeProperty("background-color"); docume ...

javascripthtmlcssbackgroundopacity

Put the tab in the Shiny tabsetPanel over on the right side

Is it possible to have tabs on both the left and right sides of a tabsetPanel? For example, one tab on the right while others remain on the left, creating a layout like the one below: https://i.sstatic.net/oTZgH.png library(shiny) ui <- fluidPage( ...

cssrshinybootstrap-4