How do align texts in the child div


Tags: html,css

Problem :

I am trying to text-align to center on a div with texts. The texts inside the div needs to be aligned to the left.

In my jsfiddle

html

<div class="parent">
    <div class="texts">my text my text my text<br>my textmy text</div>    
</div>

CSS

.parent {
    text-align:center;
}

.texts{
   //not sure what to do    
}

I need to have texts div center inside the parent div but no indentations on two lines of texts. I can't really set the widths because they all needs to be responsive. How do I solve this? Thank you!

https://jsfiddle.net/bh4pu001/



Solution :

Use

.parent {
    text-align:center;
}

.texts{
    display: inline-block;
    text-align: left;
}
<div class="parent">
    <div class="texts">my text my text my text<br>my textmy text</div>    
</div>


    CSS Howto..

    How to style form use css [closed]

    Intellij IDEA 11: how can I compile .css from .less?

    How to get same cursor(hand) on links in all browser?

    So I have an HTML file with a paragraph and I need to break into three lines BUT i can only modify the CSS. How do I pull this off? (code below)

    How to make a css 'snail'?

    How to centralise a button div

    How to get element to fill 100% height of parent

    Pure CSS3 show/hide full height div with transition

    How can I find the CSS3 rotation of an element?

    How to color the Horizontal and Vertical Lines at (0,0) darker in JavaFX

    How should it work if I want a page to have a theme-roller (more or less like the jQuery themeroller)

    CSS layout - How to lay every box especially when sidebar is not staying in the container?

    How to generate a source map for minified CSS generated by dotless

    How do I center my content inside the menu?

    How to highlight table rows if error is found - Jquery

    How to add shadow 'wings' to a centered content div

    tinymce how to specify the css file to be used for tinymce in another js file

    How to make recessed button in CSS

    how to do display none using css

    How to delete first pseudo after

    How to stop default CSS in asp.net [closed]

    how to animate a css grandient change with jquery

    How to have multiple borders on div using css

    Are where any examples available on how to use postcss-modules instead of css-modules?

    How to keep width of the main container to maximum width in a 3 column fluid layout?

    CSS question: how to remove the border from an image in WordPress

    showing element out of scroll area

    How to override cloudmade maps css with your own css? [closed]

    How to properly style current_page_item based from theme

    How to locate a list of webelement using Css selector in C#