Html 容器内文本的对齐方式_Html_Css

Html 容器内文本的对齐方式

html css

Html 容器内文本的对齐方式,html,css,Html,Css,我设计了一个容器，它包含不同的部分，所以当我尝试对齐其中的文本和数据时，它会下降，而不是在div中。所以我尝试过，但我不知道是什么导致了这种错误…公司名称和其他详细信息会下降或脱离div栏。。。如何使h1标签中的公司名称和p标签中的以下数据显示在同一个div中 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Docum

我设计了一个容器，它包含不同的部分，所以当我尝试对齐其中的文本和数据时，它会下降，而不是在div中。所以我尝试过，但我不知道是什么导致了这种错误…公司名称和其他详细信息会下降或脱离div栏。。。如何使h1标签中的公司名称和p标签中的以下数据显示在同一个div中

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="home2.css">
    
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<style>
#container {
    background-color: darkgreen;
    height: 350px;
    width: 400px;
    border-style: solid ;
    border-color: #787878;
}

#containerhead {
    height: 10%;
    background-color: antiquewhite;
}

#containerbottom {
    height: 20%;
    background-color: white;
    bottom: 0;
}

#containercenter {
    height: 70%;
}
/*/*/*/*/*/
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown-content a:hover {
  background-color: #ddd;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown {
  float: right;
  overflow: hidden;
    
}
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropbtn {
    height: 36px;
    width: 36px;
}

#pagedesc {
    height: 30%;
    background-color: bisque;
}

#pagedetails {
    height: 100%;
    width: 80%;
    background-color: white;
}


#companyico {
    display: inline-block;
    height: 90%;
    padding-left: 6px;
    padding-top: 5px;
    width:auto;
}


</style>
</head>

<body>
    <div id="container">
        <div id="containerhead">
        
        <div class="dropdown">
    <button class="dropbtn">
      <i class="material-icons">more_horiz</i>
    </button>
    <div class="dropdown-content">
      <a href="#">Option 1</a>
      <a href="#">Option 2</a>
      <a href="#">Option 3</a>
    </div>
  </div> 
        </div>
        <div id="containercenter">
        <div id="pagedesc">
            <div id="pagedetails"><img id="companyico" src="Logo.jpg" alt="pagelogo"><div id="deta"><h3>Company name</h3><p>123456 apps</p></div>
            <span id="btn"></span>
            </div></div>
        <div id="postdetails">
            
        </div>  
        
        
        </div>
        <div id="containerbottom">
            
        
        </div>
    </div>
    
</body>
</html>

您需要更改它们的“显示”属性以使其成为内联显示。在下面的解决方案中，我使用flex使它们内联。还有其他方法可以使它们内联。您可以在此处阅读有关flexbox的更多信息：

无标题文件容器{ 背景色：暗绿色；高度：350px；宽度：400px；边框样式：实心；边框颜色：7878； } 集装箱头{ 身高：10%；背景色：仿古白色； } 集装箱底板{ 身高：20%；背景色：白色；底部：0； } 集装箱中心{ 身高：70%； } /*/*/ */*/*/ .下拉：悬停.下拉内容{ 显示：块； } .下拉列表内容a：悬停{ 背景色：ddd； } .下拉内容{ 显示：无；位置：绝对位置；背景色：f9f9f9；最小宽度：160px；盒影：0px 8px 16px 0px rgba0,0,0,0.2； z指数：1； } .下拉列表{ 浮动：对；溢出：隐藏； } .下拉内容a{ 浮动：无；颜色：黑色；填充：12px 16px；文字装饰：无；显示：块；文本对齐：左对齐； } .dropbtn{ 高度：36px；宽度：36px； } pagedesc{ 身高：30%；背景色：深蓝色； } 页面详细信息{ 显示器：flex；对齐项目：居中；身高：100%；宽度：80%；背景色：白色； } 公司{ 显示：内联块；身高：90%；左侧填充：6px；垫面：5px；宽度：自动； } 德塔{ 显示器：flex；对齐项目：居中；左边距：10px； } 更多霍里兹公司名称 123456个应用程序

给你。更干净的代码版本

我有广告使用display:flex将您的img和公司整合在一起

运行下面的代码段

容器{ 背景色：暗绿色；高度：350px；宽度：400px；边框样式：实心；边框颜色：7878； } 集装箱底板{ 身高：20%；底部：0； } 容器中心{} /*/*/ * /*/*/ .下拉：悬停.下拉内容{ 显示：块； } .下拉列表内容a：悬停{ 背景色：ddd； } .下拉内容{ 显示：无；位置：绝对位置；背景色：f9f9f9；最小宽度：160px；盒影：0px 8px 16px 0px rgba0,0,0,0.2； z指数：1； } .下拉列表{ 浮动：对；溢出：隐藏； } .下拉内容a{ 浮动：无；颜色：黑色；填充：12px 16px；文字装饰：无；显示：块；文本对齐：左对齐； } .dropbtn{ 高度：36px；宽度：36px； } pagedesc{ 身高：30%；背景色：深蓝色； } 页面详细信息{ 身高：100%；背景色：白色； } 公司{ 显示：内联块；身高：90%；左侧填充：6px；垫面：5px；宽度：自动； } 德塔{ 显示器：flex； } 无标题文件更多霍里兹公司名称 123456个应用程序

给你。更干净的代码版本

我添加了一个div，将您的img和公司结合在一起，还使用display:flex

运行下面的代码段

这是使用float的另一种方法：left 容器{ 背景色：暗绿色；高度：350px；宽度：400px；边框样式：实心；边框颜色：7878； } 集装箱头{ 身高：10%；背景色：仿古白色； } 集装箱底板{ 身高：20%；背景色：白色；底部：0； } 集装箱中心{ 身高：70%； } /*/*/ * /*/*/ .下拉：悬停.下拉内容{ 显示：块； } .下拉列表内容a：悬停{ 背景色：ddd； } .下拉内容{ 显示：无；位置：绝对位置；背景色：f9f9f9；最小宽度：160px；盒影：0px 8px 16px 0px rgba0,0,0,0.2； z指数：1； } .下拉列表{ 浮动：对；溢出：隐藏； } .下拉内容a{ 浮动：无；颜色：黑色；填充：12px 16px；文字装饰：无；显示：块；文本对齐：左对齐； } .dropbtn{ 高度：36px；宽度：36px； } pagedesc{ 身高：30%；背景色：深蓝色； } 页面详细信息{ 身高：100%；宽度：80%；背景色：白色； } 公司{ 身高：43%；左侧填充：6px；垫面：5px；浮动：左；宽度：22%；右边距：20px； } 德塔{ 浮动：左； } 无标题文件更多霍里兹公司名称 123456个应用程序

这是使用float的另一种方法：left 容器{ 背景色：暗绿色；高度：350px；宽度：400px；边框样式：实心；边框颜色：7878； } 集装箱头{ 身高：10%；背景色：仿古白色； } 集装箱底板{ 身高：20%；背景色：白色；底部：0； } 集装箱中心{ 身高：70%； } /*/*/ * /*/*/ .下拉：悬停.下拉内容{ 显示：块； } .下拉列表内容a：悬停{ 背景色：ddd； } .下拉内容{ 显示：无；位置：绝对位置；背景色：f9f9f9；最小宽度：160px；盒子阴影：0px 8px 16px 0px rg ba0,0,0,0.2； z指数：1； } .下拉列表{ 浮动：对；溢出：隐藏； } .下拉内容a{ 浮动：无；颜色：黑色；填充：12px 16px；文字装饰：无；显示：块；文本对齐：左对齐； } .dropbtn{ 高度：36px；宽度：36px； } pagedesc{ 身高：30%；背景色：深蓝色； } 页面详细信息{ 身高：100%；宽度：80%；背景色：白色； } 公司{ 身高：43%；左侧填充：6px；垫面：5px；浮动：左；宽度：22%；右边距：20px； } 德塔{ 浮动：左； } 无标题文件更多霍里兹公司名称 123456个应用程序

你能提供一张你想要达到的目标的图片吗？它们都显示在div中。你的意思是如何将它们放在同一行中？h3和p标记都是块，这意味着它们将把其他元素推到新行。您可能需要浮动它们，或者在h3和p标签上将display设置为inline block。是的，我已经用我想要作为输出的图像更新了帖子。您能提供一张您想要实现的图片吗？它们都显示在div中。您的意思是如何将它们放在同一行中？h3和p标记都是块，这意味着它们将把其他元素推到新行。您可能需要浮动它们，或者在h3和p标签上将display设置为inline block。是的，我已经用我想要作为输出的图像更新了帖子。请回答这个问题。flex是最好的方式，它帮助社区。感谢你的帮助。我们也来回答这个问题。flex是最好的方式，它帮助社区。感谢你的帮助。欢迎