Is there a way to center text that is aligned to the left within a div?

Is there a way to center text that is left aligned? I'm struggling to achieve the following effect:

This text
is
left aligned.

                                  This text
                                  is
                                  left aligned
                                  and in
                                  the center (isn).

How can I achieve this within a div? I have attempted the commonly suggested method of using text-align:center in a parent div and then text-align: left in the child div, but it doesn't seem to work. Here is an example: http://codepen.io/nrojina0/pen/OXGdXJ

div#stores {
  font-size: 1.25em;
  width: 100%;
  text-align: center;
  border: 1px solid black;
}
div#storesleft {
  display: inline-block;
  float: left;
  width: 33%;
  text-align: left;
  margin: 0 auto;
  border: 1px solid black;
}
<div id="stores">

  <div id="storesleft">

    Boo and Roo's
    <br>112 E. Moore St.
    <br>Southport, NC 28461
    <br>(910)363-4275
    <br>
  </div>

</div>

htmlcsstext-alignment

Answer №1

Is there a way to center text that is initially aligned to the left?

To center text that is left aligned, simply eliminate the float property from the "centered" child element.

"When it comes to centering, remember... avoid using float!"

div#shops {
  font-size: 1.25em;
  width: 100%;
  text-align: center;
  padding: 1em;
}
div#shopsleft {
  display: inline-block;
  width: 33%;
  text-align: left;
  margin: 0 auto;
}
<div id="shops">

  <div id="shopsleft">

    Zara's Boutique
    <br>220 Spring St.
    <br>New York, NY 10012
    <br>(212)555-1234
    <br>
  </div>

</div>

I want the text within the three child divs to be left aligned, yet still centered within their respective div. How can I achieve this?

Based on your revised specifications (in the comments), I recommend utilizing flexbox to eliminate the need for additional wrappers.

Here is a demo with the necessary additional wrappers: Codepen Demo

Flexbox Demonstration:

div#shops {
  font-size: .85em;
  width: 100%;
  display: flex;
  justify-content: space-around;
}
div#shopsleft {
  border: 1px solid black;
}
div#shopscenter {
  border: 1px solid black;
}
div#shopsright {
  border: 1px solid black;
}
<div id="shops">

  <div id="shopsleft">

    Zara's Boutique
    <br>220 Spring St.
    <br>New York, NY 10012
    <br>(212)555-1234
    <br>
  </div>

  <div id="shopscenter">

    Starry Night Crafts
    <br>394 Sunset Blvd.
    <br>Los Angeles, CA 90001
    <br>(310)987-6543
    <br>
  </div>

  <div id="shopsright">

    The Green Thumb Plant Shop
    <br>810 Garden Way
    <br>Portland, OR 97205
    <br>(503)123-4567
    <br>

  </div>

</div>

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

My goal is to create text that is opaque against a backdrop of transparency

Is it feasible using CSS to create text with a transparent background while keeping the text opaque? I attempted the following method: p { position: absolute; background-color: blue; filter: alpha(opacity=60); opacity: 0.6; } span { color: b ...

htmlcss

Utilize Bootstrap's custom validation exclusively on fields that are invalid

Exploring Bootstrap features has led me to wonder if there's a straightforward method to change the styling of a field specifically when it is considered invalid. <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" ...

htmlcssbootstrap-5

Imitate a style using jQuery without deleting other elements

This is an example of HTML code: <div id="id1" style="width:100px;background: rgb(196, 14, 14);">1</div> <div id="id2" style="margin-top:10px">2</div> to <div id="id1" style=&qu ...

javascriptjqueryhtml

Displaying a webpage within a viewport without utilizing any predefined templates

Currently seeking a solution to effectively display HTML emails within a Rails 4.2 application view without utilizing an iframe, which has proven to be unreliable. The current method of rendering is as follows: %iframe{srcdoc: "#{@email.html}" I have re ...

ruby-on-railshtmlruby-on-rails-4iframe

Don't pay attention to the parent form tag in Bootstrap

Here is the code snippet I am working with: <div class="row"> <form id="update"> <div class="col-md-6"> <h1>Title</h1> </div> </form> <form id="insert"> <div class="col-md-6"> &l ...

htmlbootstrap-4

Is there a way to create a table cell that occupies zero space?

I have a very intricate table setup that resembles a tree structure, with only a few cells on the left and many on the right. I am looking to completely hide specific cells, along with their entire rows, using JavaScript based on their class. Using visibi ...

htmlcssfontscss-tables

Eliminate the AM and PM options from the input time selection dropdown menu in HTML

https://i.sstatic.net/wKeQk.png Is it possible to eliminate the AM / PM option from the input time format dropdown? The form builder currently uses a 24-hour format that includes the AM / PM field. ...

htmlcssangularinput

Stop the form submission until validation is complete

I'm currently working on a form and encountering some validation issues. HTML: <form id="regForm" class="form-group" method="POST" action="signup.php"> <div class="col-md-12"> <h2>Job Pocket</h2> </div> <di ...

javascripthtml

Forecasting text input demands

Many websites display suggestions in a drop-down menu as you type, some even showing a preview of the most likely result in a lighter-gradient font next to the cursor. For example, Spotlight on my Mac does this: https://i.sstatic.net/hDyxG.png Spotlight ...

htmlformsuser-interface

Issues with implementing a Bootstrap dropdown list in a Django HTML template

I'm having trouble implementing Bootstrap in my Django project's shared HTML file. The dropdown list isn't functioning properly despite trying various approaches, including using CDN and local Bootstrap files. When I click on the dropdown li ...

pythonhtmldjangodjango-templatesbootstrap-5

Display a div using Jquery depending on the visibility and checked value of another div

Trying to toggle the visibility of a div based on another div's input has proven to be quite challenging in this scenario. Here is the HTML setup: <div id="main-question"> <div class="form-group"> <div class="form-radios"> ...

jquerycss

Difficulty with JQuery Show and Hide Functionality

I've implemented a jQuery menu, but encountering the issue where clicking on any menu link opens all menus instead of just the one clicked. I've attempted to resolve this by using show and hide classes, however, it seems that nothing is working n ...

jqueryhtmlcss

Multiple instances of Ajax drop-down effects are now available

On my website's staff page, I have implemented a dropdown menu using AJAX to display information about each member of the staff. The issue arises when attempting to open multiple dropdown menus on the same page - the second dropdown that is opened ten ...

javascriptphpjqueryhtmlajax

The file you are trying to import, bootstrap-sass, cannot be located or is unreadable

Experimenting with Django Shop and following a tutorial that can be found here: (stable version). After starting the server and navigating to localhost, the following error message is displayed: Error: File to import not found or unreadable: bootstrap-s ...

cssdjangobootstrap-4django-shop

Can a nofollow attribute be added to concealed modal content in Bootstrap?

Query: I am dealing with a situation where I have a significant amount of disclaimer text within a modal on my website. This text is initially hidden (display:none) until a user clicks a button to reveal it. I want to prevent search engines from indexing t ...

htmlcssseo

Attempting to create a dynamic dropdown menu with animated effects triggered by a key press

I've been attempting to construct a menu that initially appears as a small icon in the corner. Upon pressing a key (currently set to click), the checkbox is activated, initiating the animation. Most of the menu and animation are functional at this po ...

javascripthtmlcsslua

issues with the handler not functioning properly in html and javascript

<form method="post" action="."> <label class="input-label">Enter Your First Name</label><input field="first_name" class="input-edit" maxlength="30" type="text" value="{{ user.first_name }}" /> <label class="i ...

javascripthtml

`<a> The value does not appear upon page load`

As a newcomer to development, I am currently experimenting and creating a sample dashboard. However, I am facing an issue where the sidebar value does not display upon loading the page. I have to manually click on a list in my sidebar for it to appear. Th ...

htmlcssbootstrap-4

Is it possible to employ flexbox CSS to stack four tables on top of each other, allowing for resizing up to the maximum height of the window?

After experimenting with various setups, I have yet to find a complete solution. My objective is to have 4 tables stacked on top of each other, each starting just below 1/4 of the browser height. I want the ability to resize each table vertically, making t ...

htmlcssflexbox

Tips for avoiding a large <ul> element from spilling over the body in a flexbox design

I struggled to articulate the problem I am facing, and I apologize if it's still unclear So, in my app, I have 3 cards, and the 2 side ones contain lists (<ul>) that can become quite lengthy. I want the scrollbar to appear on the <ul> its ...

htmlcssflexbox