html - 将标题顶部的文本移动到标题中间

Question

我正在使用 wordpress 模板。我在页面的标题中有以下代码。页面是http://dev.apostolosloukas.org .

我想在标题的中心显示 better-health-info 类，而不是在顶部显示，如右图所示。例如:

<header id="header" class="head" role="banner">
        <nav id="site-navigation" class="main-navigation navbar navbar-default navbar-menu" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <div class="site-branding">
                                                    <a class="navbar-brand" href="https://dev.apostolosloukas.org/?customize_changeset_uuid=bea820bc-25a2-4fea-8499-42cb64427f29&amp;customize_messenger_channel=preview-0" target="_self">
                                </a><a href="https://dev.apostolosloukas.org/?customize_changeset_uuid=bea820bc-25a2-4fea-8499-42cb64427f29&amp;customize_messenger_channel=preview-0" class="custom-logo-link" rel="home" itemprop="url" target="_self" title="Shift-click to edit this element."><span class="customize-partial-edit-shortcut customize-partial-edit-shortcut-custom_logo"><button aria-label="Click to edit this element." title="Click to edit this element." class="customize-partial-edit-shortcut-button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13.89 3.39l2.71 2.72c.46.46.42 1.24.03 1.64l-8.01 8.02-5.56 1.16 1.16-5.58s7.6-7.63 7.99-8.03c.39-.39 1.22-.39 1.68.07zm-2.73 2.79l-5.59 5.61 1.11 1.11 5.54-5.65zm-2.97 8.23l5.58-5.6-1.07-1.08-5.59 5.6z"></path></svg></button></span><img width="820" height="462" src="https://dev.apostolosloukas.org/wp-content/uploads/2018/04/Facebook-Cover-2.jpg" class="custom-logo" alt="Ιατρικό Κέντρο &quot;Ο Απόστολος Λουκάς&quot;" itemprop="logo" srcset="https://dev.apostolosloukas.org/wp-content/uploads/2018/04/Facebook-Cover-2.jpg 820w, https://dev.apostolosloukas.org/wp-content/uploads/2018/04/Facebook-Cover-2-300x169.jpg 300w, https://dev.apostolosloukas.org/wp-content/uploads/2018/04/Facebook-Cover-2-768x433.jpg 768w" sizes="(max-width: 820px) 100vw, 820px"></a>                            
                                            </div><!-- .site-branding -->

                </div>

                <div class="better-health-info">
                    <ul class="contact-detail2">
                                            <li>
                            <span class="icon-box--description"><a href="#"><i class="fa fa-home fa-2x"></i> Ηλία Παπακυριακού 24, Τ. Κ. 2415, Έγκωμη, Λευκωσία, Κύπρος</a></span>
                        </li>

                        <li>
                            <span class="icon-box--description"><a href="tel:22100444"><i class="fa fa-phone fa-2x"></i> 22100444</a></span>
                        </li>

                        <li>
                            <span class="icon-box--description"><a href="mailto:info@apostolosloukas.org"><i class="fa fa-envelope-o fa-2x"></i> info@apostolosloukas.org</a></span>
                        </li>

                    </ul>
                </div>
            </div>
        </nav><!-- #site-navigation -->
    </header>

你能帮帮我吗？

Answer 1

如果你把你的容器变成一个 flex 容器，你可以align-items: center

添加下一个样式:

#header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

希望这有帮助:)