Html 将徽标和公司名称居中放置在网页顶部_Html_Css_Flexbox

Html 将徽标和公司名称居中放置在网页顶部

html css

Html 将徽标和公司名称居中放置在网页顶部,html,css,flexbox,Html,Css,Flexbox,我想中心的公司标志和公司的名称在网页的顶部。公司名称也应位于徽标的中心。现在，它在标志的底部。这就是我到目前为止所做的： <style> .logo img { width: 100px; height: auto; } @media (max-width: 1100px) { .logo { display: flex; justify-content: center; align-items: center; height: 100

我想中心的公司标志和公司的名称在网页的顶部。公司名称也应位于徽标的中心。现在，它在标志的底部。这就是我到目前为止所做的：

<style>
 .logo img {
  width: 100px;
  height: auto;
}

@media (max-width: 1100px) {
  .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }

  .logo img {
    width: 50%;
    height: auto;
  }
}

    </style>

<html>
 <hr style="height:5px;border-width:0;color:gray;background-color:gray" />
        <div class="logo">
            <img src="download.png" /> This is Test Company Name
        </div>
        <hr style="height:12px;border-width:0;color:gray;background-color:gray"/>

</html>


.logo img{
宽度：100px；
高度：自动；
}
@介质（最大宽度：1100px）{
.标志{
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：100vh；
}
.logo img{
宽度：50%；
高度：自动；
}
}

这是测试公司的名字

这是图像的外观：

我想将徽标和公司名称居中放置。

.logo{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.logo img{
宽度：100px；
高度：自动；
}
@介质（最大宽度：1100px）{
.标志{
弯曲方向：立柱；
高度：100vh；
}
.logo img{
宽度：50%；
高度：自动；
}
}


这是测试公司的名字

如何将公司名称与徽标居中。现在，名称出现在页面底部logo@anjali更新了代码您需要高度100vh吗？高度可以多多少少告诉我。如果删除高度100vh，它将居中