How to align items to the left and center within a div?

How can I position the items inside a div in such a way that one element is centered and the other is aligned to the left?

I attempted using flexbox, but found it difficult without introducing a hidden third element or justifying content.

Another approach I tried was using text-align on the parent element, however this caused all elements to be aligned in either a centered or left-aligned manner.

HTML:

.left{

}

.center{

}
<div class="container">
  <div class="left">
    I'm left aligned
  </div>
  <div class="center">
    I'm center aligned
  </div>
</div>

Edit

I am aligning the actual divs themselves, with the centering relative to the parent container.

htmlcss

Answer №1

One way to achieve a hidden element using flex and :after pseudo-element:

.container {
  display: flex;
  border: 1px solid #000;
}

.container:after {
  content: " ";
  display: block;
  flex: 1;
}

.left,
.center {
  border: 1px solid #0F0;
  flex: 1;
  text-align: center;
}
<div class="container">
  <div class="left">
    I'm left aligned
  </div>
  <div class="center">
    I'm center aligned
  </div>
</div>

Answer №2

RESULTS https://i.stack.imgur.com/vSjaQ.png

Is there a way to structure the elements within a div so that one is centered and the other is aligned to the left?

To achieve this layout, you can utilize percentage-based widths and distribute them accordingly:

.container {
  border: 1px solid;
  width: 500px;
  height: 200px;
}

.left {
  float: left;
  width: 33.33%
}

.right {
  float:left;
  width:33.33%;
  text-align:right;
}

.center {
  float: left;
  width: 33.33%;
  text-align:center;
}
<div class="container">
  <div class="left">
    This content will be left aligned
  </div>
  <div class="center">
    This content will be center aligned
  </div>
  <div class="right">
    An example of a right-aligned div...
  </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

Getting the chosen option from a dropdown list mapped in ReactJS

I am working on a dropdown select option that is linked to the data of an array object called 'template_titles'. Currently, the value in the dropdown corresponds to the title in the object. My goal is to be able to extract and use the selected va ...

javascripthtmlreactjs

Is there a way to update the styling of specific sections of an input field as the user enters text in React?

Just like in most markdown editors, I am looking to enable the ability to modify parts of an input field as the user enters text. For instance: When the user types "_above_", as soon as the second underscore is typed, the text should be styled accordingly ...

javascripthtmlcssreactjs

What is the best way to reveal and automatically scroll to a hidden div located at the bottom of a webpage?

Whenever the image is clicked, I want to display a hidden div with effects like automatically scrolling down to the bottom This is what my code looks like: $(document).ready(function() { $('#test').click(function() { $(&apos ...

javascriptjqueryhtmlcsscodeigniter

What is the trick to incorporating nested tabs within tabs?

My tabs are functional and working smoothly. To view the jsfiddle, click here - http://jsfiddle.net/K3WVG/ I am looking for a way to add nested tabs within the existing tabs. I would prefer a CSS/HTML solution, but a JavaScript/jQuery method is also acce ...

javascriptjqueryhtmltabs

Is there a way to adjust the opacity of a background image within a div?

I have a lineup of elements which I showcase in a grid format, here's how it appears: https://i.stack.imgur.com/JLCei.png Each element represents a part. The small pictures are essentially background-images that I dynamically set within my html. Up ...

htmlcssangular

Stuck autoplay feature when clicking

There is an issue with the play function in the built-in browser audio player. Initially, it starts automatically with the following code... function play(){ var audio = document.getElementById("myaudio"); audio.play(); } However, when modifying the code ...

javascripthtmlaudioonclick

The CSS overflow property is a great tool to demonstrate how a box can be neatly cut off at its

According to the specifications outlined in this resource, In situations where overflow occurs, the 'overflow' property determines if a box is clipped to its padding edge. Additionally, it specifies whether or not a scrolling mechanism will b ...

htmlcss

Guide to ensuring the navbar remains at the top of the webpage following an image

I am attempting to create a sticky navbar that stays at the top of the page once the header has been scrolled past. It should have a similar effect as shown in this example on codepen.io, but with the addition of an image that stretches across most of the ...

javascriptjqueryhtmlcss

Exploring the functionality of setAttribute method in JavaScript

Snippet: activeCell.onclick = function() { console.log(element); element.value = this.value; console.log(element.value); console.log(element); }; Imagine activeCell as a span with value = "678", while element is represented by a simple in ...

javascripthtmlinput

Animation will cease once the page is refreshed via Ajax

I'm facing a challenge with a problem that I can't seem to resolve. The issue lies in my use of this plugin for displaying random images. The only step left is to refresh the content within the div. However, every time I attempt to do so, the an ...

jqueryhtmlajax

Methods to Maintain Consistent HTML Table Dimensions utilizing DOM

I am facing an issue with shuffling a table that contains images. The table has 4 columns and 2 rows. To shuffle the table, I use the following code: function sortTable() { // Conveniently getting the parent table let table = document.getElementById("i ...

javascripthtmlcssdom

Complete a form when a link or button on the webpage is clicked

I have a variety of links and buttons on my webpage, and they are generated dynamically. I am unable to assign an onclick event to each one individually. My goal is to submit form data to the next page whenever any link or button on the page is clicked. ...

javascriptjqueryhtml

Safari is not properly handling element IDs when used in conjunction with React

I am currently in the process of building a straightforward single-page website utilizing React. At the top of the page, there is a navigation bar that contains links to various sections of the site: <li><a href="/#about">About u ...

javascripthtmlreactjssafarianchor

Is there a solution available for tidying and organizing a CSS stylesheet efficiently?

In the project I am currently working on, the previous developers took an interesting approach by constructing all the selectors based on individual properties. For instance: .panel .selected a, a.selected-thumb, .date-picker input[type="submit"], .headi ...

cssparsing

Ways to conceal rows within an implicit grid

In the code snippet below, CSS Grid is used to adjust the number of columns for wider containers. When dealing with narrower containers (such as uncommenting width: 80vw or resizing the example), implicit rows are added (with only two being specified in th ...

htmlcsscss-grid

Error encountered with the item properties in vue-simple-calendar 'classes'

For my Vue.js project, I am utilizing the npm calendar package called `vue-simple-calendar` and aiming to implement dynamic classes for each event item like background-color, etc. However, the `classes` property doesn't seem to be functioning as expec ...

cssvue.jsnpmcalendar

Two flexible-sized containers placed side by side, with an ellipsis displayed on the left container

Can you achieve a layout where two elements are inside a container and float side-by-side? The right element should adjust its size based on the content while the left element fills the remaining space in the container with an ellipsis to truncate overflow ...

htmlcssdynamicellipsis

How can we style the <a> link once it has been downloaded?

Is there a way to change the color of a download link after it has been clicked on? I've attempted using the visited attribute, but it only seems to work with regular links and not with download documents: Appreciate any help ...

javascripthtmlcssreactjs

What is the best way to retrieve the value of a JavaScript variable and display it within an HTML label tag

In my JavaScript code, I'm attempting to retrieve location coordinates using the onchange event and then display those coordinates in a label. I've tried alerting the coordinates successfully, but I'm struggling to update the label using doc ...

javascripthtml

The button's background color will vanish if you click anywhere outside the button or on the body of

Struggling with a tabpane created using HTML, CSS, and JavaScript. The problem arises when the background color of the active tab's button disappears upon clicking outside the button or on the body. While switching between tabs, I can change the color ...

javascripthtmlcss