Aligning items to the left and center using CSS flexbox

Is there a way to align the first element to the left and the second element to the center within a flex container? I've tried using different options like justify-content and align-items with center, but I can't seem to get the second element in the middle of the paging box.

Below is the CSS and HTML code:

paging-section {
  display: flex;
  height: 60px;
}

/* .paging-section div {
  flex: 1;
} */

.pagination-info {
  align-items: flex-start;
  margin-top: 15px;
  background-color: red;
}

.pagination-box {
  width: auto;
  height: 38px;
  margin: 20px 308px 369px 215px;
  padding: 0 16px 0 16px;
  border-radius: 4px;
  box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.08);
  border: solid 1px #d8dce6;
  background-color: #ffffff;
  display: flex;
  background-color: yellow;
  // justify-content: center;
  // align-items: center;
}

<div class="paging-section">
  <div class="pagination-info">
    <p>
      {{ size }}
      {{ 'ADMIN.PAGINATION.RESULTS' | translate }}
    </p>
  </div>
  <div class="pagination-box">
     ....
  </div>
</div>

Any suggestions on how to center the yellow element within the container while keeping the first one on the left side? Thank you! https://i.sstatic.net/3uUPV.jpg

htmlcss

Answer №1

After setting a fixed width to .pagination-info and applying margin: 0px auto; to .pagination-box, I proceeded to translate the .pagination-box to the left by half the width of .pagination-info with transform: translateX(-50px);

.paging-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  height: 60px;
}

/* .paging-section div {
  flex: 1;
} */

.pagination-info {
  align-items: flex-start;
  background-color: red;
  max-width: 100px;
  width: 100px;
  min-width: 100px;
  word-break: break-all;
}

.pagination-box {
  margin: 0px auto;
  transform: translateX(-50px);
  width: auto;
  height: 38px;
  padding: 0 16px 0 16px;
  border-radius: 4px;
  box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.08);
  border: solid 1px #d8dce6;
  background-color: #ffffff;
  display: flex;
  background-color: yellow;
  // justify-content: center;
  // align-items: center;
}
<div class="paging-section">
  <div class="pagination-info">
    <p>
      {{ size }}
      {{ 'ADMIN.PAGINATION.RESULTS' | translate }}
    </p>
  </div>
  <div class="pagination-box">
     ....
  </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

What is the best way to include multiple ng-repeats within a single ng-repeat?

Hey, I'm facing quite a tricky situation with this grid and could use some assistance. I'm trying to figure out how to populate the data using ng-repeat. I've attached an image showcasing the desired layout of the grid and the order in which ...

javascriptangularjstwitter-bootstrapcssangularjs-ng-repeat

What is the best way to transfer a table with multiple rows in a single column to an Excel spreadsheet while maintaining the headers on a horizontal plane

Currently, I am in the process of gathering data. The data is being sent to me in a word format and organized in a vertical columned table with different headers and alternating data. I am looking for a way to export this data from Word into an Excel spre ...

htmlcssexcelvbams-word

Implementing CSS keyframe animations in a customized Material UI component using React, Material UI, and JSS

I'm facing an issue with adding a CSS keyframe animation to my Material UI custom styled component. Whenever I try to add a keyframe animation, it throws an error in my code setup: const PulsatingCircle = styled("div")(({ theme, }) => ( ...

cssreactjsmaterial-uijss

Python Selenium for Element Detection

I am a beginner when it comes to using Selenium and I am currently seeking guidance on how to locate the element that is highlighted in this image: https://i.sstatic.net/uXf4u.png Despite my attempts, the following code resulted in an error message being ...

pythoncssselenium

What is the best way to emphasize a table column when a cell is selected?

I successfully implemented a feature where a cell (td-element) is highlighted when clicked by the user. However, I now want the entire column to be highlighted with the cell itself having a slight variation. I am struggling with achieving the last part ...

javascriptjqueryhtmlcss

Finding the precise top offset position with jQuery upon scrolling – a step-by-step guide

I need help with detecting the offset top of a TR element when it is clicked. It works fine initially, but once the page is scrolled, the offset().top value changes. How can I resolve this issue? $(function() { $('tr').click(function() { ...

javascriptjqueryhtmlcss

Refreshing content with Ajax when the back button is clicked

Hey everyone, I've been working on an ajax site and I'm having trouble getting the content to reload when the back button is clicked. I'm using Dynamic Drives ajax content script along with a script that changes the URL onclick and a popstat ...

javascriptjqueryhtmlajax

Issue in Ionic 3 where ion-list does not scroll vertically on iOS devices when ion-items are dynamically generated using ngFor within the ion-list

When using Ionic v3 to develop a hybrid app, I encountered an issue where ion-items within an ion-list generated using *ngFor are not scrollable on iOS devices. Strangely, this problem does not occur on Android devices. Here is the HTML code snippet: < ...

ioscssionic-frameworkscrollionic3

What is the solution to having a div move along with window resizing without displacing adjacent divs?

After much effort, I still can't seem to get this working correctly. I've been playing around with a section named "RightExtra" and a div inside it called "RightExtraContent". My goal is to allow these two divs to move freely when the window is ...

javascriptjqueryhtmlcss

The Ajax/jQuery output is not showing up in the iframe, but is instead appearing on a separate page

I've scoured various forums and websites, attempting to troubleshoot the issue described below without success. This problem persists in both IE 11 and Firefox 10.0.2. My goal is to submit a form (POST) to a website () and showcase the resulting bri ...

javascriptjqueryhtmlajaxiframe

Begin an unnumbered hierarchical list commencing at 1.2.1

I am trying to create a nested unordered list with specific numbering. My goal is for the list to start at "1.2.1, 1.2.2, etc." Please refer to the attached fiddle for reference. The desired outcome is shown in the following image: https://i.stack.imgur ...

htmlcss

Changing CSS module variables through JavaScript programming

I'm currently utilizing an older version of react-boilerplate that includes CSS Modules, allowing for the creation of variables and the ability to import them into other CSS files. Below is my colors.css file: :root { /* Status colors */ --error ...

csspostcsscss-modulesreact-css-modulesreact-boilerplate

Is there a way to effortlessly launch a new window with just a single click?

I'm encountering an issue with a function that is supposed to open a new window when a button is clicked. Strangely, on the first click, nothing happens, but on the second click, the window finally opens. Here's my code: Script <script src ...

javascriptjqueryhtmlhtml-tableclick

What is the best way to showcase the current element using jQuery?

I have this example: link HTML CODE: <div class="common-class"> <div class="trigger"> <span class="plus">+</span> <span class="minus">-</span> </div> <div class="show"></div> </div&g ...

jqueryhtmlcss

Jquery bypasses original stylesheet settings when inline styles are removed

I have a CSS file with various styles defined within it. One style in particular has the property position set to 'fixed', but this only applies to specific combinations of classes. For example: .mystyle.blue { position: fixed; } Here, el ...

jquerycss

What is the best way to address a row of hyperlink text located at the top of a webpage?

I have encountered an issue where three rows of text links near the top of a page shift up to the very top when a link is pressed, causing them to obscure a line of text that was already at the top. How can I keep the position of these three rows anchored? ...

htmlcsshyperlinkalignment

Most effective method for designing a reusable <table> appearance

For my project, I need to create multiple tables using data from a database on different pages. I want to maintain a consistent styling throughout these tables: The first and last rows should have a bold font with reversed foreground/background colors. Th ...

jquerycss

The size of Bootstrap 3 columns adjusts dynamically based on the width of the window as the page is being

I am facing an issue with the layout of my bootstrap site when resizing the 3 horizontal columns based on the window size upon page load. Currently, I have a script that adjusts the height of each column to match the tallest one so they appear uniform whe ...

javascriptjqueryhtmlcsstwitter-bootstrap

The dilemma of selecting objects in Three.js

Currently, I am developing a small web application that utilizes three.js. However, I have encountered an issue: I created a prototype with my three.js content and everything functions correctly (the canvas size in the prototype matches the browser window ...

javascripthtmlthree.js

Unlocking the Power of JavaScript: Harnessing Its Potential for Numerous IDs in HTML

There's a script I came across on the internet at this link: let multi = 2; let str = "Little lamb"; let multiStr = ""; while(multi > 0){ multiStr += str multiStr += " "; multi--; } multiStr = multiStr.trimEnd ...

javascripthtmlfor-loop