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

Question

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&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/

Answer 1

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">
<span id="findanevent" class="event">Find an Event</span>
<span id="postanevent" class="event">Post an Event</span>
</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!

Answer 2

You need to wrap your links inside a div the use display flex. there are many ways to do this but I prefer flex it easy.
<div class="entry-content">
<div class="links-wrapper">
<div class="lasvegas">
Events
</div>
<div class="findanevent">
Find an Event
</div>
<div class="postanevent">
Post an Event
</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 3

Wrap your findanevent and postanevent divs into a main wrapper like <div class="eventsWrap"> and put this in a display:flex property. So that the two divs will be in same line. Because by default the display:flex property shows the child element into same line like inline or rows. Next you have to add a property is justify-content:center;, align-items:center;, align-content:center; align-self:center;. Hope it may help you! Good luck.
.eventsWrap { display:flex; justify-content:center; align-items:center; align-content:center; align-self:center;}

Answer 4

you can take these 3 in flex box:
<div style=" display: flex;justify-content: center;">
<div Events></div>
<div Find an Event></div>
<div Post an event></div>
</div>
I hope this will help.

Answer 5

Try this one for set links
<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>
I hope this one is helpful