在IE11上，垂直的日文文字不能居中对齐。

Question

我第一次使用垂直日语文字，我已经在新的浏览器上实现了我想要的效果，但是客户使用的是IE11，在IE11上文字不能居中对齐。

这个问题可以在下面的页面看到，如果你向下滚动到组合项目之后。

https:/eiken-net.comconstruction-examples。

问题的形象

我不是开发人员，对htmlcss只有基本的了解，而且我使用的是wordpress主题，所以很棘手。

Answer 1

在'IE'中，'ms-writing-mode'和'margin:auto;'分析与其他浏览器不一致，你可以手动使用'position'在中间。

.vc_custom_heading_wrap {
  height: 320px;
  position: relative;
}

.vertical-heading-2 {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-family: serif;
  height: 310px;
  background-color: white;
  margin: auto;
  text-align: left;
  position: absolute;
  left: calc(50% - 92px);
}

<div class="vc_custom_heading_wrap">
  <div class="heading-text el-text vertical-heading-2">
    <h1 class="fontsize-263531">
      <span>自信があります。</span>
      <span>無垢の家を</span>
      <span>比べてください。</span>
    </h1>
  </div>
  <div class="clear"></div>
 </div>

使用Internet explorer访问

或以密码笔

Answer 2

这个问题涉及到 margin: auto; CSS属性，尝试更改 margin: auto; 到 margin-left: 50%; margin-right: 50%;

代码如下。

.vertical-heading-2 {
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    height: 310px;
    background-color: white;
    margin-left: 50%;
    margin-right: 50%;
    text-align: left;
}

同时，你也可以在网页CSS样式的最后添加以下CSS样式。

.vertical-heading-2 { 
    margin-left: 50%;
    margin-right: 50%; 
}

在IE浏览器中输出。