css INLINE-BLOCK div对齐中心，但保持内部元素仍然左对齐

Question

我需要帮助这个简单的例子，我设计的只是为了理解INLINE-BLOCK相关的布局。它很简单：左右两部分，右上部分有上下元素。我希望右侧部分位于[屏幕宽度减去左侧部分]的中心，而右侧部分h3和p元素左侧对齐。我添加了一个边框，只是为了了解我是否已经充分利用了右侧屏幕的空间。有时我的双手被捆绑所以我无法改变html，所以我需要纯粹的CSS方法。我确实在这里阅读了一些类似的问题，但经过一些测试我仍然迷失了----例如，给右边部分宽度：500px？但是我需要为不同的屏幕设置正确的中心部分！另一个问题：右侧部分text-align：center也会影响内部元素;内部元素text-align：left也会影响正确的部分。请注意：这是关于内联块....和纯css。感谢任何回应。

.left{
display:inline-block;
background:aqua;
}
.right{
border:solid;
display:inline-block;
}

<OCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
        
<div class="whole">
  <div class="left"><p>lefter</p></div>

  <div class="right">
    <h3>upperright</h3>
    <div class="lowerright"><p>sdfsdfsdfsdfsdfsdd</p>
    </div>
  </div>
</div>

</body>
</html>

附图显示了我的想法.

Answer 1

添加

margin-left: 50%;
transform: translatex(-50%);

到.right。希望这可以帮助。谢谢

.left {
  display: inline-block;
  background: aqua;
}

.right {
  border: solid;
  display: inline-block;
  margin-left: 50%;
  transform: translatex(-50%);
}

<OCTYPE html>
  <html>

  <head>
    <title></title>
  </head>

  <body>

    <div class="whole">
      <div class="left">
        <p>lefter</p>
      </div>
      <div class="right">
        <h3>upperright</h3>
        <div class="lowerright">
          <p>sdfsdfsdfsdfsdfsdd</p>
        </div>
      </div>
    </div>

  </body>

  </html>

css INLINE-BLOCK div对齐中心，但保持内部元素仍然左对齐

问题描述投票：-1回答：1

1个回答

最新问题

css INLINE-BLOCK div对齐中心，但保持内部元素仍然左对齐

问题描述 投票：-1回答：1

1个回答

最新问题

问题描述投票：-1回答：1