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

Issue

I have three pieces of text, Events Find an Event and Post an event

Events is positioned correctly in the centre of the page, but Post An Event and Find An Event are positioned left of centre.

How do I put these two pieces of text next to each other (same line) and in the centre of the page?

Tried.

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

Here is my 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 -->

Page: https://adsler.co.uk/events/

Solution

You need a wrapper around the two anchors to center them both in the same line:

.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>

don't use the font tag anymore, it is deprecated. You can just use the classes you already have or add a new one like I did.

Hope this helps!

Answered By - Horst Otto

Answer Checked By - David Marino (PHPFixing Volunteer)