How to align text vertically equal top CSS


Tags: html,css

Problem :

I am trying to align the text vertically equal using css, but there is some sort of space in the right side span.

Have added the code and fiddle link.

p{
    clear: both;
    margin: 0;
    padding: 0;
    display: table;
}
span.blue{
  background: blue;
}
span.green{
  background: green;
}
span.black{
  background: black;
}
span.circle{
      width: 15px;
    height: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    display: inline-block;
    margin-right: 12px;
    /* float: left; */
    vertical-align: top;
}
span.desc{
      /* float: left; */
    width: 115px;
    vertical-align: top;
    display: inline-block;
}
<div class="container">
  <p>
     <span class="blue circle"></span>
     <span class="desc">Blue text</span>
  </p>
  
  <p>
     <span class="green circle"></span>
     <span class="desc">Green text</span>
  </p>
  
  <p>
     <span class="black circle"></span>
     <span class="desc">black text</span>
  </p>

</div>

Fiddle Link



Solution :

Use vertical-align: middle or you can use the same line-height and font-size to solve the issue as in the snippet below.

p span {
    font-size: 16px;
    line-height: 16px;
}

Explanation:

Keeping the same line-height and font-size will ensure that vertical-align: top will work perfectly fine.

snippet below:

p{
    clear: both;
    margin: 0;
    padding: 0;
    display: table;
}
span.blue{
  background: blue;
}
span.green{
  background: green;
}
span.black{
  background: black;
}
span.circle{
      width: 15px;
    height: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    display: inline-block;
    margin-right: 12px;
    /* float: left; */
    vertical-align: top;
}
span.desc{
      /* float: left; */
    width: 115px;
    vertical-align: top;
    display: inline-block;
}
p span {
    font-size: 16px;
    line-height: 16px;
}
<div class="container">
  <p>
     <span class="blue circle"></span>
     <span class="desc">Blue text</span>
  </p>
  
  <p>
     <span class="green circle"></span>
     <span class="desc">Green text</span>
  </p>
  
  <p>
     <span class="black circle"></span>
     <span class="desc">black text</span>
  </p>

</div>


    CSS Howto..

    How to click an element by innerthtml using CSS selectors in Selenium

    How to display a dynamic rating based on css and the value from PHP? [closed]

    How to make a list of “background-image” CSS using WebDriver with Java

    HTML/CSS: how to force text within a tag to be styled with font-style: italic !important;

    How to adjust the position of specific elements/items/content on a page with CSS

    How to fix the alignment of my sub-menu

    How to add styling to active input's previous sibling using CSS only [duplicate]

    How to apply a CSS style to div AND the div nested in the div [duplicate]

    Anyone know how Atlassian sizes the height of the splitter div in Confluence?

    How can I select first element with a specific class

    How do I get this list to be seperated by a tab? (HTML/CSS)

    Is this how CSS LESS and SimpLESS work? [closed]

    How to make CSS/HTML prototyping faster for engineers without strong CSS skills?

    How does floating and clearing on the same element work?

    How to detect which button is clicked in javascript?

    How can I show part of an element, and toggle to all of the element on click?

    How to remove dropdown active color in bootstrap 3.0?

    Show and hide table column using jQuery

    How to arrange the elements of a semicircle in css/html/js

    how to correctly render a response on an gsp from on the same page as the request (REST call) in grails

    How to make a pure css based dropdown menu?

    How to adjust an image size with a progressive scaling on viewport resize

    AngularJS / CSS - How to set the width of a select box to a value from $scope?

    efficient way to show an beside each instance

    how to do jquery once fade out has finished?

    How do I properly inspect jquery and javascript using web developer tools?

    Hovering over a container div shows hidden div. When cursor is put over hidden div, behavior of container div changes

    How does the Meebo bar work so well cross-browser?

    How can I make this menu using only ul, li and css?

    how to make row span column content start at the top of the column with css and html