私は要素の行を持っていますが、その中の1つは中央に配置する必要があります。このシンプルなスニペットを実行しようとすると、 "中にいる必要があります"ということは真ん中にはありませんが、周りのものの大きさにもかかわらず、私はそれが好きです。 "text-align：center"は、要素のリスト全体を真ん中に置き、中間にあることを私が知りたくないので、助けにならないでしょう： 特定の要素を中央に保持するにはどうすればよいですか？
マージン：autoを使用してみてください。このように：
.the-center {
display: inline-block;
font-weight: bold;
margin: auto;
}
ソリューションdisplay:flexを使用します。
.the-whole {
display: flex;
}
.the-whole div {
display: inline;
}
.the-whole > div {
flex: 1;
border: 1px solid green;
}
.the-whole > div.center {
text-align: center;
}<div class="the-whole">
<div class="left">
<div>
long thing at left
</div>
<div>
a
</div>
<div>
b
</div>
</div>
<div class="center">
<div>
(Must be in the Middle)
</div>
</div>
<div class="right">
<div>
c
</div>
<div>
d
</div>
</div>
</div>これは解決策か？
.the-whole {
width: 100%;
text-align: center;
}
.side-thing {
float: left;
margin: 8px;
}
.the-center {
float: left;
font-weight: bold;
margin: 0 auto;
}
最初に動作しているか確認してください。 – Justinas
あなたが左に移動することができ、右の要素は内部のものを中心に比べて、HTMLを変更することができた場合：
.the-whole {
width: 100%;
text-align: center;
}
.side-thing {
display: inline-block;
}
.the-center {
display: inline-block;
position: relative;
margin: 8px;
padding: 0 10px;
}
.the-center span {
font-weight: bold;
}
.left {
position: absolute;
white-space: nowrap;
right: 100%;
top: 0;
}
.right {
position: absolute;
white-space: nowrap;
left: 100%;
top: 0;
}<div class="the-whole">
<div class="the-center">
<div class="left">
<div class="side-thing">
long thing at left
</div>
<div class="side-thing">
a
</div>
<div class="side-thing">
b
</div>
</div>
<span>(Must be in the Middle)</span>
<div class="right">
<div class="side-thing">
c
</div>
<div class="side-thing">
d
</div>
</div>
</div>
</div>あなたはフレキシボックスを使用することができます。
.the-whole {
display: flex;
}
.side {
flex: 1; /* Distribute remaining width equally among the left and right parts */
}
.the-left {
text-align: right;
}
.the-right {
text-align: left;
}
.side-thing {
display: inline-block;
margin: 0 8px;
}
.the-center {
font-weight: bold;
}<div class="the-whole">
<div class="the-left side">
<div class="side-thing">long thing at left</div>
<div class="side-thing">a</div>
<div class="side-thing">b</div>
</div>
<div class="the-center">(Must be in the Middle)</div>
<div class="the-right side">
<div class="side-thing">c</div>
<div class="side-thing">d</div>
</div>
</div>新しいdivを挿入する方がよいと思います。だからあなたは7つを持っています。中央に1つしかありません。
#page{
\t
\t width: 100%;
\t text-align: center;
\t }
.the-whole {
\t width: 39%;
\t display: inline-block;
\t text-align: center;
}
.side-thing {
min-width: 10%;
display: inline-block;
text-align: center;
margin: 0px;
border: 0.1em solid red;
}
.side-thing-left{
min-width: 40%;
display: inline-block;
text-align: center;
margin: 8px;
border: 0.1em solid red;
}
.the-center {
width: 20%;
display: inline-block;
font-weight: bold;
border: 0.1em solid green;
}<html>
\t <head>
\t <link rel="stylesheet" href="style.css" type="text/css" />
\t </head>
\t <body>
\t \t <id id="page">
\t \t \t <div class="the-whole">
\t \t \t \t <div class="side-thing-left">left</div>
\t \t \t \t <div class="side-thing">a</div>
\t \t \t \t <div class="side-thing">b</div>
\t \t \t </div>
\t \t \t \t <div class="the-center">(Must be in the Middle)</div>
\t \t \t <div class="the-whole">
\t \t \t \t <div class="side-thing-left">left</div>
\t \t \t \t <div class="side-thing">c</div>
\t \t \t \t <div class="side-thing">d</div>
\t \t \t
\t \t \t </div>
\t \t </div>
\t </body>
</html>
あなたがHTMLを変更することはできますか？ – Justinas