Как отображать текстовые ссылки в центре и рядом с CSS? - PullRequest
Новая
       11

Как отображать текстовые ссылки в центре и рядом с CSS?

1 голос
/ 06 мая 2019

У меня есть три фрагмента текста, 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/

Ответы [ 5 ]

0 голосов
/ 06 мая 2019

Попробуйте это для набора ссылок 

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

Я надеюсь, что это полезно

0 голосов
/ 06 мая 2019

Вы можете взять эти 3 в гибкой коробке: 

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

Надеюсь, это поможет.

0 голосов
/ 06 мая 2019

Вам понадобится обертка вокруг двух якорей, чтобы расположить их по одной линии: 

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

больше не используйте тег шрифта, он устарел.Вы можете просто использовать уже существующие классы или добавить новый, как я.

Надеюсь, это поможет!

0 голосов
/ 06 мая 2019

Оберните ваши findanevent и postanevent делители в основную оболочку, например <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;}
0 голосов
/ 06 мая 2019

Вам нужно обернуть свои ссылки внутри div, используя display flex.Есть много способов сделать это, но я предпочитаю согнуть это легко. 

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