let’s say we have p, q,r,s,t aligned in the center of a web page −
p q r s t
我们希望上述内容保持不变，除了最右边的即t向右移动，像这样−
p q r s t
现在让我们看一些例子来实现我们上面看到的。
center one and right/ left align other flexbox element with auto marginsexample的中文翻译为：示例通过使用自动边距和一个新的、不可见的 flex 项，可以在网页上实现上述布局 −
<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在这个例子中，我们将使用与 t 相同宽度的伪元素。使用 ::before 将其放置在容器的开头。
example的中文翻译为：示例让我们现在来看一个例子−
<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 layoutin this example, create a grid with multiple columns. then position your items in the middle and end columns.
example的中文翻译为：示例让我们现在来看一个例子−
<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>
以上就是在html中，将一个元素居中并将其他弹性盒子元素右/左对齐的详细内容。