How can I get a label to right align in a table “cell” (td)?


Tags: html,css,alignment,html-table

Problem :

I've got this html:

<td>
  <label class="whitefont righthoralign">Search</label>
</td> 

...with this CSS:

.righthoralign {
    text-align: right;
}

...which does nothing - the label stays left aligned as before:

enter image description here

What I found here, namely this:

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

...made things far worse.

How can I get the label to hug the right side of the cell/td in which it finds itself?



Solution :

The <label> element is inline level, the width is the size of the label text by default.

Try:

label {
  display: block;
  text-align: right;
}

Or:

td {
  text-align: right;
}

    CSS Howto..

    How can I replicate something similar to querySelector in browsers like IE 7 and 6?

    show,hide DIV with mouseover , mouseout

    How to make a floating box in the center of the screen with responsive layout?

    How to create CSS for round, responsive, bootstrap button with border? Border is affecting pixels

    external css loaded but not aplied to html - php codeigniter ssl - how to change css mimetype = text/html to text/css

    How to set the path to compile my CSS with Compass SASS

    How to adjust the height of two objects floating next to each other according to the amount of content, using css

    How to get an App made using JavaScript to autoresize for other Apple Devices?

    How to get alternate colors div with pure css and with IE 7 support?

    How to select a div with specific css property

    How to write HTML, CSS and Javascript all together in Joomla 2.5 article? [closed]

    How to make css transition effect apply to all its children?

    How can I get rid of these shadows on my text in Internet Explorer?

    How to create a floating JavaScript Clock for UTC and Local Time?

    How to dynamically change the value of a CSS property inside a stylesheet?

    How do you prevent a CSS animation from rerunning when the display property changes?

    How to change order of divs in HTML code, for 3-column CSS Layout?

    How to apply a css class for jqGrid height property setGridHeight?

    How to make divs float on both ends of another div?

    MaterializeCSS - Mobile Collapse menu not showing when clicked

    How to implement block style for list

    CSS: How to change tooltip position to align to triggering element (rest of code working)

    How to space children evenly horizontally in css

    How to make content next to a fixed-position menu not overlap in smaller resolutions

    How do I do the exact opposite [closed]

    how to apply stylesheet to wp frontend, via plugin i created?

    How to add css to a div once it hits the top of the page (when scrolling)?

    how to set equal font size in table cells for mobile device html pages

    How to automatically resize a box to fit content — with jQuery Mobile

    How can I toggle a div to reveal content with CSS