Question

我有三段文字，Events Find an Event和Post an event

Events正确地位于页面中心，但是Post An Event和Find An Event则位于页面中心左侧。

如何将这两段文本彼此相邻（同一行）并放在页面中央？

尝试过。

.postanevent {text-align : center! important; display: 
inline-block! Important;}
.findanevent] text-align: center! Important; display: inline- 
block! Important; }

这是我的html：

<div class="entry-content">
<div class="lasvegas">
Events
</div>
<div class="findanevent"><a 
href="https://adsler.co.uk/find-an-event/"></p>
<div class="findanevent"><font size="3"><font 
color="white">Find an Event</font></font></div>
<p></a></p>
<div class="postanevent"><a 
href="https://adsler.co.uk/post-an-event/"></p>
<div class="postanevent"><font size="3"><font 
color="white">Post an Event</font></font></div>
<p></a></p>
</div><!-- .entry-content -->
<footer class="entry-footer">
<span class="edit-link"><a class="post-edit-link" 
href="https://adsler.co.uk/wp-admin/post.php? 
post=6811&#038;action=edit">Edit <span class="screen- 
reader-text">"Events"</span></a></span> </footer><!-- 
.entry-footer -->
</article><!-- #post-## -->
</div><!-- #primary -->

页面：https://adsler.co.uk/events/

Answer 1

您需要将链接包装在use display flex的div内。有很多方法可以做到这一点，但是我更喜欢灵活操作。

<div class="entry-content">
    <div class="links-wrapper">
        <div class="lasvegas">
            Events
        </div>
        <div class="findanevent">
            <a href="https://adsler.co.uk/find-an-event/">Find an Event</a>
        </div>
        <div class="postanevent">
            <a href="https://adsler.co.uk/post-an-event/">Post an Event</a>
        </div>
    </div>
</div><!-- .entry-content -->


<style type="text/css">
    .entry-content{
        width: 100%;
    }
    .links-wrapper{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
    .links-wrapper > div{
        margin: 0 15px;
    }
</style>

Answer 2

您需要在两个锚点之间包裹一个包装，以使它们都位于同一行的中心：

.event_wrapper {
  text-align: center;
}

<div class="event_wrapper">
  <a href="https://adsler.co.uk/find-an-event/"><span id="findanevent" class="event">Find an Event</span></a>
  <a href="https://adsler.co.uk/post-an-event/"><span id="postanevent" class="event">Post an Event</span></a>
</div>

不再使用字体标签，已弃用。您可以只使用现有的类，也可以像我一样添加新的类。

希望这会有所帮助！

Answer 3

将您的findanevent和postanevent div包装到像<div class="eventsWrap">这样的主包装中，并将其放入display:flex属性中。这样两个div将在同一行。因为默认情况下，display:flex属性将子元素显示在同一行中，例如内联或行。接下来，您必须添加一个属性justify-content:center;, align-items:center;, align-content:center; align-self:center;。希望对您有所帮助！祝你好运。

.eventsWrap { display:flex; justify-content:center; align-items:center; align-content:center; align-self:center;}

Answer 4

您可以在弹性包装盒中放入这3个：

<div style=" display: flex;justify-content: center;">
 <div Events></div>
 <div Find an Event></div> 
 <div Post an event></div>
</div>

我希望这会有所帮助。

Answer 5

尝试使用此链接设置

<div class="entry-content" style="text-align: center;">
    <div class="lasvegas">
       Events
    </div>
    <div class="findanevent">
        <a href="https://adsler.co.uk/find-an-event/">
            <div class="findanevent">
                <font size="3">
                    <font color="black">Find an Event</font>
                </font>
          </div>
        </a>
        <div class="postanevent">
            <a href="https://adsler.co.uk/post-an-event/">
                <div class="postanevent">
                    <font size="3">
                        <font color="black">Post an Event</font>
                    </font>
                </div>
            </a>
        </div>
       <!-- .entry-content -->
    </div>
    <!-- #primary -->
</div>

<style>
    .lasvegas{
        display: inline-block;
    }
    .findanevent{
        width: 100%;
    }
</style>

我希望这对您有帮助

如何在CSS中并排显示文本链接？

5 个答案: