在另一个div内水平居中div - 不允许使用滚动条

Question

我有一个父div，它连续有几个子div。子div的总宽度大于父div和我的屏幕的宽度。我希望文本“CENTERED X CENTERED”能够水平居中。我不希望显示滚动条。我必须使用white-space：nowrap。

<div style="width:100%; overflow:hidden; text-align:center">
  <div style="display:inline-block; white-space:nowrap; width:100%; margin-left:auto; margin-right:auto; text-align:center">
  <div style="display:inline-block">My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text...</div>
  <div style="display:inline-block">CENTERED X CENTERED</div>
  <div style="display:inline-block">My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text...</div>
</div>

我如何修改我的代码？

Answer 1

你能使用额外的div吗？最外层是溢出：隐藏，所以使额外的div超宽 - 比内容更宽。然后，您可以使用一些聪明的CSS来集中它：

https://jsfiddle.net/5cvujqd3/

基本结构

git master

和一些CSS

<div class="outer">
  <div class="inner">
    <!-- inline-block stuff here -->
  </div>
</div>

Answer 2

使用#include <iostream> #include <stack> using namespace std; void main() { stack<int> myStack; int userFactor, tempFactor, stackLoop; int runTotal = 0; cout << "Enter number to be factorialized: "; cin >> userFactor; tempFactor = userFactor; if (userFactor == 1 || userFactor == 0) //a "base case" of sorts cout << endl << userFactor << " factorialized is 1.\n"; else { while (tempFactor > 1) //load the stack { myStack.push(tempFactor); tempFactor--; } runTotal = myStack.top(); //start unloading the stack myStack.pop(); stackLoop = (int)myStack.size(); for (int x = 0; x < stackLoop; x++) //multiply each { runTotal *= myStack.top(); myStack.pop(); } cout << endl << userFactor << " factorialized is: " << runTotal << endl; } } ，transform:translateX()和white-space:nowrap

overflow:hidden;

.parent {
  overflow: hidden;
}
.parent > div {
  display: inline-block;
  white-space: nowrap;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.parent > div > div {
  display: inline-block;
}