In HTML, center one element and right/left align other flexbox elements-HTML Tutorial-php.cn

In HTML, center one element and right/left align other flexbox elements

WBOY

Release： 2023-09-04 10:25:06

forward

1096 people have browsed it

In HTML, center one element and right/left align other flexbox elements

Let’s say we have P, Q,R,S,T aligned in the center of a web page −

                                P Q R S T

Copy after login

We want the above content to remain the same, except that the rightmost one, i.e. T, moves to the right, like this −

                                 P Q R S                                 T

Copy after login

Now let's look at some examples to implement what we saw above.

Center one and right/ left align other flexbox element with auto margins

The Chinese translation of

Example

is:

Example

The above layout can be achieved on a web page by using automatic margins and a new, invisible flex item −

<html>
<title>Example</title>
<head>
   <style>
      li:first-child {
         margin-right: auto;
         visibility: hidden;
      }
      li:last-child {
         margin-left: auto;
         background: orange;
      }
      ul {
         padding: 0;
         margin: 0;
         display: flex;
         flex-direction: row;
         justify-content: center;
         align-items: center;
      }
      li {
         display: flex;
         margin: 3px;
         padding: 10px;
         background: red;
      }
      p {
         text-align: center;
         margin-top: 0;
      }
   </style>
<head>
<body>
   <ul>
      <li>T</li>
      <li>P</li>
      <li>Q</li>
      <li>R</li>
      <li>S</li>
      <li>T</li>
   </ul>
</body>
<html>

Copy after login

Center one and right/ left align other flexbox element with pseudo element

In this example, we will use a pseudo-element with the same width as T. Use ::before to place it at the beginning of the container.

The Chinese translation of

Example

is:

Example

Let’s look at an example now −

<html>
<title>Example</title>
<head>
   <style>
      ul::before {
         content: "T";
         margin: 1px auto 1px 1px;
         visibility: hidden;
         padding: 5px;
         background: orange;
      }
      li:last-child {
         margin-left: auto;
         background: orange;
      }
      ul {
         padding: 0;
         margin: 0;
         display: flex;
         flex-direction: row;
         justify-content: center;
         align-items: center;
      }
      li {
         display: flex;
         margin: 3px;
         padding: 10px;
         background: red;
      }
   </style>
<head>
<body>
   <ul>
      <li>P</li>
      <li>Q</li>
      <li>R</li>
      <li>S</li>
      <li>T</li>
   </ul>
</body>
<html>

Copy after login

Center one and right/ left align other flexbox element with Grid Layout

In this example, create a grid with multiple columns. Then position your items in the middle and end columns.

The Chinese translation of

is:

Example

Let’s look at an example now −

<html>
<title>Example</title>
<head>
   <style>
      ul {
         display: grid;
         grid-template-columns: 1fr repeat(4, auto) 1fr;
         grid-column-gap: 5px;
         justify-items: center;
      }
      li:nth-child(1) {
         grid-column-start: 2;
      }
      li:nth-child(5) {
         margin-left: auto;
      }
      ul {
         padding: 0;
         margin: 0;
         list-style: none;
      }
      li {
         padding: 10px;
         background: red;
      }
      p {
         text-align: center;
      }
   </style>
<head>
<body>
   <ul>
      <li>P</li>
      <li>Q</li>
      <li>R</li>
      <li>S</li>
      <li>T</li>
   </ul>
</body>
<html>

Copy after login

The above is the detailed content of In HTML, center one element and right/left align other flexbox elements. For more information, please follow other related articles on the PHP Chinese website!