Web Front-end
HTML Tutorial
In HTML, center one element and right/left align other flexbox elements
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
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
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 ofExample
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>
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 ofExample
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>
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>
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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1378
52
C++ object layout is aligned with memory to optimize memory usage efficiency
Jun 05, 2024 pm 01:02 PM
C++ object layout and memory alignment optimize memory usage efficiency: Object layout: data members are stored in the order of declaration, optimizing space utilization. Memory alignment: Data is aligned in memory to improve access speed. The alignas keyword specifies custom alignment, such as a 64-byte aligned CacheLine structure, to improve cache line access efficiency.
Which units are suitable for implementing responsive layout?
Jan 27, 2024 am 09:39 AM
What units to choose for responsive layout? With the popularity of mobile devices and tablets, more and more people are using various devices to browse the web. In order to ensure that web pages have good readability and user experience on different devices, responsive layout has gradually become an important consideration in design and development. When implementing responsive layout, choosing the right units is very important. This article will analyze several common units to help readers choose the appropriate units to implement responsive layout. Pixel (px): Pixel is the most common unit of length and represents a
How to align layers in Photoshop
Apr 01, 2024 am 11:31 AM
1. First, we need to open the Photoshop software and enter the interface, and the author will take the picture as shown below as an example to demonstrate the alignment between layers. 2. If we want to align layers, we first need to find the layer bar in the lower right corner of the interface. 3. Then, if the layer is not rasterized or unlocked, we need to right-click the layer to rasterize or double-click to unlock it. 4. Next, we need to hold down shift and select the layers that need to be aligned. 5. Finally, we need to find the [Select] tool in the toolbar, and find the Alignment tool in the upper function bar. We click the way we want to align, and we can quickly align the selected layers.
CSS text property optimization tips: font, line height, and text alignment
Oct 22, 2023 am 08:15 AM
CSS text attribute optimization tips: font, line height and text alignment In web design, text is an integral part. By optimizing CSS text properties, we can improve the readability and user experience of our website. This article will share some optimization tips, including choosing the right font, setting reasonable line height and text alignment, and provide specific code examples. 1. Choose the right font Choosing the right font is crucial to the readability and visual effect of the web page. Here are a few key factors to consider: Font families: Choose ones with good
Align flex items to center of container using CSS
Sep 19, 2023 pm 02:57 PM
Align flex items to the center using the justify-content property with a value of center. Example You can try running the following code to achieve a live demonstration of the central value <!DOCTYPEhtml><html> <head> <style> .mycontainer{ &nbs
The Ultimate Guide to Aligning HTML Text for Cleaner Web Pages
Apr 09, 2024 pm 01:39 PM
To align HTML text, you can use the text-align attributes (left, center, right, justify), CSSFlexbox (justify-content) and CSSGrid (grid-template-columns, justify-content). The specific choice depends on the needs, such as center-aligning titles (text-align or justify-content), aligning text paragraphs on both ends (justify), and flexible and responsive image galleries (justify-content dynamically adjusts alignment). Best practices emphasize semantics, choose according to needs, and consider the specific needs of the design (centered
In HTML, center one element and right/left align other flexbox elements
Sep 04, 2023 am 10:25 AM
Let’s say we have P,Q,R,S,Talignedinthecenterofawebpage−PQRST We want the above to remain the same except the rightmost i.e. T is moved to the right like this−PQRST Now let’s see some examples to implement what we saw above. The Chinese translation of Centeroneandright/leftalignotherflexboxelementwithautomarginsExample is: Example By using automatic margins and a new, invisible flex item, the above layout can be achieved on a web page −<html>&am
Choose the method that best suits your type of responsive layout
Feb 18, 2024 pm 04:19 PM
How to choose a suitable responsive layout type requires specific code examples. With the popularity of mobile devices and the rapid development of the Internet, responsive layout has become an important consideration in web design. Responsive layout can automatically adjust the layout and content display according to different screen sizes and device types, providing a better user experience. However, choosing the right type of responsive layout is not an easy task. This article will introduce several common responsive layout types and give corresponding code examples. I hope it can help readers better choose the one that suits their needs.
