Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/88.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 将文本居中放置在div中心的css_Html_Css - Fatal编程技术网

Html 将文本居中放置在div中心的css

Html 将文本居中放置在div中心的css,html,css,Html,Css,.副菜单{ 浮动:左; 边缘顶部:150px; 高度:250px; 宽度:150px; 边框:1px实心F9F2F2F2; 边界半径:10px; } .菜单{ 高度:45px; 宽度:150px; 文本对齐:左对齐; 左边距:2倍; 背景:-o-线性梯度底部,E5E3E35%,ffffff 100%; 背景:-webkit gradientlinear,左上,左下,color-stop0.05,e5e3e3,color-stop1,ffffff; 背景:-moz线性梯度中心顶部,E5E3E35%

.副菜单{ 浮动:左; 边缘顶部:150px; 高度:250px; 宽度:150px; 边框:1px实心F9F2F2F2; 边界半径:10px; } .菜单{ 高度:45px; 宽度:150px; 文本对齐:左对齐; 左边距:2倍; 背景:-o-线性梯度底部,E5E3E35%,ffffff 100%; 背景:-webkit gradientlinear,左上,左下,color-stop0.05,e5e3e3,color-stop1,ffffff; 背景:-moz线性梯度中心顶部,E5E3E35%,ffffff 100%; 过滤器:progid:DXImageTransform.Microsoft.gradientstartColorstr=e5e3e3,endColorstr=ffffff; 背景:-o-linear-gradienttop,e5e3e3,ffffff; 背景色:E5E3; 边框:1px实心F9F2F2F2; 边框宽度:0px 0px 0px 0px; 边界半径:0px 0px 10px 10px; 文本对齐:左对齐; 填充:0px 7px; } 试试这个

.menu a{line-height:40px;}
试试这个

.menu a{line-height:40px;}

您应该为链接添加线条高度,并将其设置为显示内联块,如:

.menu a {
    display: inline-block;
    height: 45px;
    line-height: 45px;
}

您应该为链接添加线条高度,并将其设置为显示内联块,如:

.menu a {
    display: inline-block;
    height: 45px;
    line-height: 45px;
}
添加一个等于div高度的线条高度

.副菜单{ 浮动:左; 边缘顶部:150px; 高度:250px; 宽度:150px; 边框:1px实心F9F2F2F2; 边界半径:10px; } .菜单{ 高度:45px; 宽度:150px; 文本对齐:左对齐; 左边距:2倍; 线高:45px;/* 添加一个等于div高度的线条高度

.副菜单{ 浮动:左; 边缘顶部:150px; 高度:250px; 宽度:150px; 边框:1px实心F9F2F2F2; 边界半径:10px; } .菜单{ 高度:45px; 宽度:150px; 文本对齐:左对齐; 左边距:2倍; 线高:45px;/* 添加

对于您的代码来说,它工作得很好

.副菜单{ 浮动:左; 边缘顶部:150px; 高度:250px; 宽度:150px; 边框:1px实心F9F2F2F2; 边界半径:10px; } .菜单{ 高度:45px; 宽度:150px; 文本对齐:左对齐; 左边距:2倍; 背景:-o-线性梯度底部,E5E3E35%,ffffff 100%; 背景:-webkit gradientlinear,左上,左下,color-stop0.05,e5e3e3,color-stop1,ffffff; 背景:-moz线性梯度中心顶部,E5E3E35%,ffffff 100%; 过滤器:progid:DXImageTransform.Microsoft.gradientstartColorstr=e5e3e3,endColorstr=ffffff; 背景:-o-linear-gradienttop,e5e3e3,ffffff; 背景色:E5E3; 边框:1px实心F9F2F2F2; 边框宽度:0px 0px 0px 0px; 边界半径:0px 0px 10px 10px; 文本对齐:左对齐; 填充:0px 7px; } a、 astext { 线高:2.5em;} 添加

对于您的代码来说,它工作得很好

.副菜单{ 浮动:左; 边缘顶部:150px; 高度:250px; 宽度:150px; 边框:1px实心F9F2F2F2; 边界半径:10px; } .菜单{ 高度:45px; 宽度:150px; 文本对齐:左对齐; 左边距:2倍; 背景:-o-线性梯度底部,E5E3E35%,ffffff 100%; 背景:-webkit gradientlinear,左上,左下,color-stop0.05,e5e3e3,color-stop1,ffffff; 背景:-moz线性梯度中心顶部,E5E3E35%,ffffff 100%; 过滤器:progid:DXImageTransform.Microsoft.gradientstartColorstr=e5e3e3,endColorstr=ffffff; 背景:-o-linear-gradienttop,e5e3e3,ffffff; 背景色:E5E3; 边框:1px实心F9F2F2F2; 边框宽度:0px 0px 0px 0px; 边界半径:0px 0px 10px 10px; 文本对齐:左对齐; 填充:0px 7px; } a、 astext { 线高:2.5em;} 您可以简单地使用:

.menu {
    display: table
}
.menu a {
    display: table-cell;
    vertical-align: middle;
}

您可以简单地使用:

.menu {
    display: table
}
.menu a {
    display: table-cell;
    vertical-align: middle;
}

简单的解决方案是设置菜单类的行高度,如下所示:

.menu a{line-height:45px;}

否则,您可以使用css显示属性将其显示为表格单元格,并定义垂直对齐中心。

简单的解决方案是设置菜单类的线条高度,如下所示:

.menu a{line-height:45px;}

否则,您可以使用css显示属性将其显示为表格单元格,并定义垂直对齐中心。

将.menu的位置设置为相对,将.astext的位置设置为绝对,边距顶部为10px

.menu{
  height: 45px;
  width: 150px;
  text-align:left;
  margin-left:2px;
  ...
  position:relative;
}


.menu a.astext{
    margin-top: 10px;
    position: absolute;
}

将.menu的位置设置为相对,并将.astext的位置设置为绝对,边距为10px

.menu{
  height: 45px;
  width: 150px;
  text-align:left;
  margin-left:2px;
  ...
  position:relative;
}


.menu a.astext{
    margin-top: 10px;
    position: absolute;
}


我想在垂直中心显示文本。我发现这个答案有三个优点:它不需要复制父元素的高度。通过这种方式,您可以更改父元素的高度,而无需更改链接元素上的任何内容,然后该元素将占据链接的整个高度,我认为这更适合按钮,然后,你可以让多行文字仍然居中,这不是使用线高度时的情况我想在垂直中心显示文字我发现这个答案有三点更好:它不需要以这种方式复制父对象的高度,您可以更改父元素的高度,而无需更改link元素上的任何内容,然后该元素将获取整个的高度,我认为这更适合按钮,然后,您可以使多行上的文本仍然居中,这在使用行高时并非如此。您不希望单击事件发生在整个按钮上,而不仅仅是文本吗?我想在单击时触发一些操作。我的意思是,单击事件只会发生在文本元素上,不是包含它的整个按钮父元素我想要它。是否可以为div执行此操作?如果可能,我将尝试。请参阅@MofarjulMolla的答案。更好的方法是我不希望点击事件发生在整个按钮上而不仅仅是文本上吗?我想在点击时触发一些操作。我的意思是,点击事件只会发生在文本元素上,不是包含它的整个按钮父元素我想要它。是否可以为div执行此操作?如果可能,我将尝试。请参阅@MofarjulMolla的答案。它比不需要显示要好得多:内联块;父代的高度为:45px;所以你也不需要它。最好设置内联块,否则链接只会在文本上触发,而不会在按钮上触发,显然他可以像他想的那样进行调整。你不需要显示:内联块;父代的高度为:45px;所以你也不需要它。最好设置为内联块,否则链接只会在文本上触发,而不会在按钮上触发,显然他可以随心所欲地进行调整。你为什么使用24px?对不起!它应该是高度的值。在这种情况下,它是45像素。菜单a{行高:45px;}为什么使用24px?对不起!它应该是高度的值。在这种情况下,它是45像素。菜单a{行高:45px;}