如何以 css 居中并排显示文本链接？

Question

我有三段文字，EventsFind 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

您需要将您的链接包裹在 div 中，以便使用 display flex。有很多方法可以做到这一点，但我更喜欢 flex it easy.

<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

你可以在 flex box 中拿下这 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 居中并排显示文本链接？

How to display text links center and side by side with css?

html

css

wordpress

vertical-alignment