How can I move text to the left with CSS?


Tags: html,css

Problem :

I have some text that is inside a span element and I'd like to left-align it instead of the way it is now which is centered. I tried making a margin to the right and text center with CSS but that didn't work. Can you tell me how to do it? The text that I want to the left is "(Jag arbetade: 4-6 timmar/vecka)" and now it is rendered centered if you look at my fiddle

The code that I'd like to change is

<div id="i4c2" class="artBaseRow">
    <div id="i4_tbl_11" class="artWrapper">
        <table class="srtbl" cellpadding="2" cellspacing="0" summary="">
            <caption><b>Vad var det bästa med kursen?</b></caption>
            <tbody>
                <tr class="srtbl-h1">
                    <th class="srtbl-qt">
                        <div>
                            <br /> <span>(Jag arbetade: 4-6 timmar/vecka)</span>
                        </div>
                    </th>
                </tr>
            </tbody>
        </table>
    </div>
</div>

So that the text "(Jag arbetade..." is aligned to the left alongside the heading. How can I do that?



Solution :

Add this css for srtbl-qt class (try put it at the end of CSS file)

.srtbl-qt {
    text-align: left;
}

Also I don't know why you need div and break and span elements around that text, but it can be removed (hint: th {padding-top: 10px;})


    CSS Howto..

    How to expand input field to the right in a header bar

    How to add html in language file of opencart 2.0.1.1?

    How to make a CSS transform affect the flow of other elements

    How to add hanging indent to the labels of a checkbox customized with custom icons in CSS?

    How do I stop css pushing
  • to the right?
  • CSS - How to centre a link button

    How can i apply and/or remove a CSS class upon user selection on Radiobuttons with JQuery?

    How to define a set of CSS class names so Vim knows how to autocomplete

    How to use icon fonts

    How can I print the selected item from bootstrap drop down using jquery or javascript in php

    In CSS how to achieve, two cells with auto width in fixed width parent, with priority to see content in second cell and with ellipsis at first cell?

    How to prevent division when using variables separated by a slash in CSS property values

    How to use CSS to select an element only if a specific element comes after the one you want to select?

    How to override bootstrip.min.css in Joomla-Template CSS file for width 768-1140px

    How to using CSS to set content of column to top not center in JSF, primefaces?

    How to achieve this simple 3 column css layout

    How To Style A Class Based On Unique ID?

    Gantry Framework-Joomla How to edit logo from CSS

    How to apply table cell formatting using CSS

    How to select list item by its contents?

    How to hide text behind image

    How to make one list-item in menu higher than the others with CSS?

    How to stack an overlay over html5 video

    how to make moving spinner's edges rounded css

    how can i force all rows in a table to have the same height

    How to make agile layout?

    How to create image queue effect using CSS3, jQuery, and HTML? [closed]

    How to customize unordered list items in HTML using CSS

    How to have two items be placed next to each other in HTML?

    How to create a box when mouse over text in pure CSS?