Question

我正在使用响应式自定义Opencart模板。我添加了一个带有＆＃34; home的div元素，联系我们，关于我们＆＃34;链接。我试图用三个链接元素来居中这个div，但没有成功。

这是我的HTML代码：

<div class="header-center">
 <a class="firstlink" href="<?php echo $home; ?>"><?php echo $text_home; ?></a>
        <span class="txtspacer">    |   </span>
        <a class="secondlink" href="<?php echo $contact; ?>"><?php echo $text_contact; ?></a>
        <span class="txtspacer2">    |   </span>
         <?php foreach ($informations as $information)  {
         if(in_array($information['information_id'], array(4))) {
          ?>
        <a class="thirdlink" href="<?php echo str_replace('&', '&amp;', $information['href']); ?>"><?php echo $information['title']; ?></a>
        <?php
        }
        } ?>
</div>

这个css代码：

.header-center{
     display: inline-block;
     left: 10%;
     position: relative;
     top: 75px;
     font-weight:bold;
}

我试图把保证金：0自动;和text-align：center：但它没有改变任何东西。这就是我使用左边的原因：10％但它并没有正确显示所有屏幕。

*对不起，我的英文或其他错误是我的第一篇文章。

Answer 1

问题是你没有设置header-center div的宽度。如果div的宽度不是动态的，则设置它的宽度，它将起作用

.header-center {
  font-weight: bold;
  margin: 0 auto;
  width: 230px;
}

<div class="cont">
  <div class="header-center">
    <a class="firstlink" href="<?php echo $home; ?>">Home</a>
    <span class="txtspacer">    |   </span>
    <a class="secondlink" href="<?php echo $contact; ?>">Contact</a>
    <span class="txtspacer2">    |   </span>
    More text |
    <a class="thirdlink" href="<?php echo str_replace('&', '&amp;', $information['href']); ?>">Info</a>
  </div>
</div>

这可能适用于每个宽度，但我不确定所有版本中的所有浏览器是否都支持它：

.header-center {
  font-weight: bold;
  margin: 0 auto;
  text-align: center;
}

<div class="cont">
  <div class="header-center">
    <a class="firstlink" href="<?php echo $home; ?>">Home</a>
    <span class="txtspacer">    |   </span>
    <a class="secondlink" href="<?php echo $contact; ?>">Contact</a>
    <span class="txtspacer2">    |   </span>
    More text |
    <a class="thirdlink" href="<?php echo str_replace('&', '&amp;', $information['href']); ?>">Info</a>
  </div>
</div>

Answer 2

如果你使用display：inline-block;你必须申请＆＃34; text-align：center;＆＃34;在其父母。如果你不想，把它留作块，只需使用margin：auto;并将其应用于定义的宽度。

所以你不再需要位置，左侧和顶部。

中心div与链接元素

2 个答案: