Question

在我的html / css应用程序中，我有一个按钮的概念，实质上是类.button，带有一堆适当的属性。这是一个简化的例子：

.button {
  width: 120px;
  height: 30px;
  line-height: 30px;
  background: yellow;
  text-align: center;
}

<div class="button">
  <div class="button-text">
    Button text
  </div>
</div>

在少数地方，需要显示的文字相当长，但仍需要完全适合。由于font-stretch属性不支持，我使用transform: scale，这就是我需要的东西 - 有点......除了上述内容，我还有：

.button {
  width: 120px;
  height: 30px;
  line-height: 30px;
  background: yellow;
  text-align: center;
}
.button-text {
  line-height: 30px;
  transform: scale(0.7, 1);
  white-space: nowrap;
}

<div class="button">
  <div class="button-text">
    Very long button text
  </div>
</div>

文本现在适合，但它不居中，因为在应用变换之前计算div中居中内容的位置 - 请参阅此jsfiddle中的示例：https://jsfiddle.net/1xz1g634/1/

我可以通过对.button-text应用负左边距来“制作”它，但是这是一个黑客攻击，并且在不同的浏览器中边距必须不同。

我如何普遍地将该文本作为中心？理想情况下，不使用javascript，但是，如果其他一切都失败了，我可以使用javascript / jquery。

Answer 1

如果您将容器设置为正确居中的display:flex + justify-content:center。

＆＃13;

.button {
  width: 120px;
  height: 30px;
  background: yellow;
  display: flex;
  justify-content: center;
}
.button-text {
  line-height: 30px;
  transform: scale(0.7, 1);
  white-space: nowrap;
}

＆＃13;

<div class="button">
  <div class="button-text">
    Very long button text
  </div>
</div>

＆＃13;

Answer 2

不幸的是，长文本没有居中的原因是它正常溢出，因此InetAddress localhost = null; try { localhost = InetAddress.getLocalHost(); } catch (UnknownHostException e) { // TODO Auto-generated catch block e.printStackTrace(); } // this code assumes IPv4 is used byte[] ip = localhost.getAddress(); for (int i = 1; i <= 254; i++) { ip[3] = (byte)i; InetAddress address = null; try { address = InetAddress.getByAddress(ip); } catch (UnknownHostException e) { // TODO Auto-generated catch block e.printStackTrace(); } try { if (address.isReachable(100)) { System.out.println(address + " machine is turned on and can be pinged"); } else if (!address.getHostAddress().equals(address.getHostName())) { System.out.println(address + " machine is known in a DNS lookup"); } else { System.out.println(address + " the host address and host name are equal, meaning the host name could not be resolved"); } } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } }无效。

缩放文本（虽然较小的字体大小{Matching enumeration}可能更合适我觉得）不会覆盖文本居中，因为变换只是视觉效果。

我认为最佳解决方案（除了font- sizing 之外）将绝对定位内部文本元素并使用常用方法将其置于中心位置。

＆＃13;

text-align:center

＆＃13;

.button {
  width: 120px;
  height: 30px;
  line-height: 30px;
  background: yellow;
  text-align: center;
  position: relative;
  margin: 1em auto;
}
.button-text {
  position: absolute;
  top: 50%;
  left: 50%;
  line-height: 30px;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  ;
}
.button-text.scaled {
  transform: translate(-50%, -50%) scale(0.7, 1);
}

＆＃13;

Answer 3

您也可以使用htm执行此操作...适用于IE9。

实际上，使用display: table来扩展到IE8。

＆＃13;

filter: progid:DXImageTransform.Microsoft.Matrix

＆＃13;

.button {
  width: 120px;
  height: 30px;
  background: yellow;
  display: table;
  text-align: center;
}
.button-text {
  display: table-cell;
  line-height: 30px;
  transform: scale(0.7, 1);
  white-space: nowrap;
}

＆＃13;

Answer 4

为你修好了。文本将自动居中，按钮将自动缩放。

<强> CSS：

<div class="button">
  <div class="button-text">
    Very long button text
  </div>
</div>

<强> HTML：

# production.rb (same in development.rb)
config.paperclip_defaults = {
  :storage => :s3,
  :path => 'photos/:id/:style/:filename',
  :s3_credentials => {
    :bucket => ENV['aws_bucket'],
    :access_key_id => ENV['aws_access_key'],
    :secret_access_key => ENV['aws_secret_key']
  }
 }

https://jsfiddle.net/m7Lgmpn6/

居中缩放溢出的文本

4 个答案: