CSS放置:文本和按钮的水平和垂直放置
CSS放置是指通过CSS样式来控制文本和按钮在页面中的水平和垂直位置。通过合适的CSS属性和值，可以实现元素的居中、左对齐、右对齐等布局效果。
常用的CSS属性和值包括：
- display: 用于设置元素的显示方式，常见的值有：
- block：元素独占一行，宽度默认为父元素的100%。
- inline：元素在一行内显示，宽度由内容决定。
- inline-block：元素在一行内显示，但可以设置宽度和高度。
- text-align: 用于设置文本的水平对齐方式，常见的值有：
- left：左对齐。
- center：居中对齐。
- right：右对齐。
- vertical-align: 用于设置元素的垂直对齐方式，常见的值有：
- top：顶部对齐。
- middle：居中对齐。
- bottom：底部对齐。
- margin: 用于设置元素的外边距，可以通过设置不同方向的外边距值来调整元素的位置。
- padding: 用于设置元素的内边距，可以通过设置不同方向的内边距值来调整元素的位置。
- position: 用于设置元素的定位方式，常见的值有：
- static：默认值，元素按照正常文档流进行布局。
- relative：相对定位，元素相对于其正常位置进行定位。
- absolute：绝对定位，元素相对于其最近的非static定位的父元素进行定位。
- fixed：固定定位，元素相对于浏览器窗口进行定位。
- transform: 用于对元素进行变换，常见的值有：
- translateX：水平平移。
- translateY：垂直平移。
- scale：缩放。
- rotate：旋转。
应用场景： CSS放置常用于网页布局和界面设计中，可以用于实现各种不同的页面布局效果，如居中对齐的导航栏、垂直居中的按钮、水平排列的图文列表等。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云CSS样式库：https://cloud.tencent.com/product/css
- 腾讯云Web+：https://cloud.tencent.com/product/tcb-webplus
- 腾讯云CDN加速：https://cloud.tencent.com/product/cdn
- 腾讯云云服务器：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库：https://cloud.tencent.com/product/cdb
相关·内容
我有以下简化的HTML代码：
还有CSS代码：
.button {文本对齐:中心；垂直对齐:中间；背景图像: url(button.png)；宽度:120 url；高度:60 url；显示:表格单元格；}
#btback {边距:10汽车10汽车；}
基本上，在div中，有一个标题和一个图片，下面是一个按钮。button.png是没有任何文本的按钮背景图像。因此，我水平和垂直对齐以上的按钮背景文本。
第一个问题是，按钮不能在中心水平对齐。如果我不使用display: table-cell，它可以在中间对齐，但文本不是垂直对齐的。
第二个问题是，可以单击按钮div的整个水平区域(边缘区域)
浏览 3提问于2011-11-25得票数 0
回答已采纳
我使用<button>在CSS中创建自定义按钮，文本似乎在每个浏览器中水平和垂直地居中，没有填充、text-align或其他属性。我所要做的就是改变它的宽度和高度，文本总是在中间。
我在问自己，这是否是每个浏览器(即使是我没有机会测试的旧浏览器)中的默认行为，还是最好将line-height和order设置为垂直居中文本，而text-align: center设置为水平居中文本，以提高所有浏览器之间的兼容性。
浏览 2提问于2014-10-01得票数 0
回答已采纳
2回答
我在水平和垂直方向上都有一点小问题。我快速地环顾了一下四周，对其他的答案并没有什么真正的理解，所以我想我应该贴出我自己的问题。
我想做的是把我的div与文本水平和垂直的中心，然而，我需要容器div保持完美的大小窗口。
这是我遇到麻烦的css。
body{margin:0 auto;}
div#section1 {height: 100vh;background: black;}
另外，这里有一个指向的链接，我不能在这里发布HTML，因为某些原因，" post“按钮会变成灰色。
谢谢
浏览 9提问于2014-06-11得票数 3
回答已采纳
1回答
HTML
<div id="divTop">divTop</div>
<div id="divBottom">divBottom
<div id="divCenter">divCenter</div>
</div>
CSS
html, body{
height:100%;
}
#divTop{
height:50px;
background:#008080;
color:#ffffff;
text-align:center;
v
浏览 1提问于2013-07-15得票数 0
回答已采纳
我搜索了堆栈溢出，但不幸的是没有找到这个特殊情况的解决方案。
我试图显示以下场景：
，容器视图，在容器视图中以水平和垂直方式居中的文本，该文本位于以该为中心的文本下面。
无论我尝试什么，我都不能在容器视图中水平和垂直地对文本进行居中，并在其下面放置一些东西，而不将其从容器视图的中心移出。
为了更好地理解，我在故事板上描述了这种行为：
如果有人能帮我用SwiftUI！：编写这个场景，那就太好了。)
浏览 0提问于2020-04-15得票数 8
回答已采纳
1回答
首先，我想在一个按钮内垂直和水平地对一个图标进行居中。到目前为止，我尝试了CSS属性position: relative;和position: absolute;，请参阅，但它不能工作。
其次，当我调整窗口大小时，由于white-space: normal;属性，按钮可以成为两个文本行的高度。我如何实现，在这种情况下，图标按钮将更新他的高度和图标仍然是居中(水平和垂直)。
<div class="container">
<div class="row">
<div class="col-md-2
浏览 6提问于2016-04-22得票数 2
回答已采纳
我有两个滚动条(水平和垂直)在网页(css+html)。此滚动条是浏览器默认控件。
我的问题是:编码的UI不能识别垂直滚动条和水平滚动条作为单个控件，所以不确定在哪里单击滚动。
开发人员正在使用滚动条的css属性。因此，它会自动检测定义的容器(水平和垂直)中的数据溢出。
感谢在这个问题上的帮助，请让我知道如何在网页中水平和垂直滚动。
向你致以最好的问候，Sunil
浏览 1提问于2014-06-25得票数 0
这是我的html和css。
<div id="name">
<p>TEST TEST TEXT</p>
</div>
#name{
width: 200px;
height: 50px;
background: #019fde;
border-radius: 10px;
}
如何将文本设置在中间(水平和垂直)？
浏览 2提问于2013-02-14得票数 0
在ConstraintLayout中，我有一个TextView，我在布局编辑器窗格中设置了对齐center：
我在上面的截图中点击了中间的那个。
然后，我的短信是这样的：
它是水平的，但不是垂直的，在ConstraintLayout编辑器窗格中，我只是找不到垂直中心的按钮。
如何在ConstraintLayout编辑器窗格中垂直和水平地对文本进行居中？
浏览 1提问于2017-12-12得票数 1
回答已采纳
3回答
我想在屏幕中央打开一个div (水平和垂直)。
var documnetWidth = $(document).width(),
documentHeight = $(document).height(),
widgetFormHeight = widgetForm.height(),
widgetFormWidth = widgetForm.width();
widgetForm.css({
top: documentHeight / 2 - widgetFormHeight / 2,
left: documnetWidth / 2 - widgetFormWidth
浏览 0提问于2012-09-01得票数 0
1回答
我是一个HTML和CSS的新手，我正在尝试创建一个简单的横幅，其中包含一个文本和两个按钮。横幅应该看起来像这样：这是我的代码：
.banner{
position: absolute;
width:90%;
display:inline-block;
bottom:50px;
height: 150px;
background: rgba(215, 40, 40, 0.9);
left:0px;
right: 0px;
margin: 0 auto;
z-index: 100;
display:inline-block;
}
浏览 0提问于2018-09-26得票数 0
假设我在div中有文本、图像等。那么如何使用javascript & css使元素在div中水平和垂直居中呢？请使用示例代码进行指导。
谢谢
浏览 0提问于2010-12-01得票数 0
我有两个项目:一个日历组件和一个按钮。它们的高度/宽度不同。
如何使它们在水平和垂直方向上居中？
桌子？Div？...
我认为每个物体都有50%的面积，并以此为中心。然而，我可能会对水平居中(彼此之间有一个间隙)持开放态度。然后将它们作为一对垂直居中。
浏览 0提问于2012-11-15得票数 1
回答已采纳
2回答
所以我需要创建垂直和水平菜单。水平方向的代码必须使用"display: inline“来完成，但我真的不知道该怎么做。此外，我想添加一些css编辑，如使用悬停改变按钮背景，使它看起来像是动画，但我不能使用js，只有纯css。将随机站点添加到菜单按钮 ?
浏览 37提问于2021-09-20得票数 1
2回答
列表样式图像的对齐方式
、、、
我想知道是否有一种方法可以确定list-style-image的水平和垂直对齐
因为目前，它看起来像这样：
_列出文本
我希望是这样的
-列出文本
非常感谢!
浏览 0提问于2013-03-31得票数 0
回答已采纳
2回答
QTableView有一个，占据水平和垂直标头之间的交集。单击此按钮将选择表中的所有单元格。我想知道的是，是否可以设置这个按钮的文本，如果可以，如何设置？
浏览 0提问于2014-03-25得票数 4
回答已采纳
我试图垂直和水平居中一个容器，里面的内容使用CSS。
标记如下所示：
<div id="container">
<img src="..someimage.jpg">
<img src="..someverticaldivider">
<form action="action.php">
<input type="text">
.... (other inputs)
</form>
</div>
我需
浏览 0提问于2012-01-31得票数 2
回答已采纳
4回答
屏幕中央的h1
、、
如何将文本水平和垂直地居中？我不想使用绝对位置，因为我试着用它和我的另一个div变得更糟。还有别的办法吗？
div {
height: 400px;
width: 800px;
background: red;
}
<div>
<h1>This is title</h1>
</div>
浏览 5提问于2016-01-03得票数 32
回答已采纳
3回答
我想要显示一行文本，下面有一个按钮，这两个按钮都是水平和垂直居中的。我目前有一个包含JLabel的BoxLayout，一个用于空格的刚性区域，然后是一个JPanel中的JButton。对于我想要做的事情来说，这似乎相当复杂，而且当窗口大小改变时，文本和按钮都不再居中。有没有更好的方法来做这件事？
----------------------
| |
| |
| |
| ________ |
| | Text | |
| ------
浏览 3提问于2011-10-23得票数 0
我想显示一个图像左对齐(在左/右有一些填充)，但垂直居中的表格单元格，同时保持文本的水平和垂直居中。
JSFiddle完整示例：
<tr>
<td>
<img title="Out of stock" src="..."><!-- This image may or may not exist -->
<a href="">4000.4</a>
</td>
<td>Lemon soda</td>
<t
浏览 2提问于2021-11-20得票数 0
回答已采纳
我尝试了许多不同的css属性，包括垂直对齐:中心，我甚至尝试了100%的高度和100%的宽度，但没有运气。都快一个小时了。
文本只对齐中间水平和顶部垂直，但我希望我的文本在中心(中间在垂直)。有什么建议吗？
以下是我的HTML代码：
*
{
margin: 0;
padding: 0;
}
body
{
background-color: black;
color: white;
}
.welcome-section
{
text-align: center;
margin: auto;
height: 100%;
}
<section id="wel
浏览 1提问于2022-04-24得票数 -1
2回答
我正在尝试居中文本(水平和垂直)，我在这方面有一点困难。
这就是我尝试过的，但它只是水平居中，而不是垂直居中。
如何将此文本置于中心位置？
<div class="playerDetailsPage">
<p>
<h4>The text will be in the center</h4>
</p>
</div>
css
.playerDetailsPage {
background-color
浏览 0提问于2014-05-29得票数 3
回答已采纳
1回答
我有一个带有按钮和标签的livecode项目。我希望按钮和标签的宽度和高度在调整窗口(堆栈)大小时发生变化。此外，我希望更改标签和按钮中文本的字体大小。我想在字体大小改变时使文本的水平和垂直对齐居中。我试过这段代码，但文本超出了按钮/标签的高度(在较大的窗口中)。
set the width of field "label" to the width of this stack * 0.8
set the height of field "label" to the height of this stack * 0.2
set the textsize of f
浏览 0提问于2014-12-29得票数 0
我很难在网上找到如何做这件简单的事情，所以我在这里问。
我有一个UINavigationController，它包含一个UINavigationBar。默认情况下，如果我的应用程序转到第二个嵌入式UIViewController，导航栏会显示一个后退按钮和一个标题。，但是标题不在中间水平的中。
如何使UINavigationBar的标题始终处于水平和垂直的中心位置？
我的意思是如何使“付费发票”旁边的按钮在导航栏的中心？
浏览 2提问于2017-09-29得票数 0
2回答
我正在尝试布局一组水平和垂直按钮。问题是，如果我为按钮指定'layout_weight‘，它们的尺寸就不会跟在'layout_width’和'layout_height‘标签后面。
以下是我想要实现的目标
因此，按钮必须具有相同的高度和宽度，并且水平和垂直分布均匀。
有没有人能提出一个解决方案？
谢谢
更新:经过大量的调查和尝试不同的解决方案，我得出的结论是，我唯一的选择是创建自己的自定义布局，并在那里正确地放置按钮。
浏览 2提问于2011-04-18得票数 0
2回答
我想要显示一个ASP.NET图像在一个DIV的中间(水平和垂直)，我应该如何排列我的div和图像(图像应该是runat=server)，我还应该为我的图像设置最大宽度和最大高度样式，div作为一个占位符，我的图像应该在DIV内，并且它应该在水平和垂直方向上都准确居中，你能显示正确的HTML和CSS吗？有样品吗？
浏览 1提问于2012-12-08得票数 0
我正在努力实现以下目标:我在页面的中央有一个垂直和水平的中间div (wrapper)。在该div中，我希望有另外2个div，其中一个将包含徽标，另一个将包含一些文本。徽标图像还必须与其div的中心垂直和水平对齐。目前，我所拥有的是：
下面是我的HTML和CSS的jsfiddle：
我如何才能使logo div居中(仅水平居中，并具有10px的页边距-顶部)，并使logo图像在该div内居中，水平和垂直居中，就像现在一样？
浏览 2提问于2012-10-16得票数 1
回答已采纳
1回答
全日历全垂直边框
、、、
我的满日历与我的引导CSS文件冲突，所以我必须手动设置我的样式。(我使用fullcalendar 2.7.3)
我想有红色的边框(水平和垂直)。我改变了：
.fc-row .fc-content-skeleton td,
.fc-row .fc-helper-skeleton td{...}
这就产生了水平和垂直的边框。但垂直边框仅显示在单元格的头部。(屏幕截图)如何插入完整的垂直边框。
浏览 1提问于2016-06-12得票数 0
2回答
我在一个视图容器里有四个按钮。我希望在按钮之间的空间自动调整大小取决于设备的屏幕大小。
视图容器受到如下约束：
水平和垂直到超级视图
与Superview相等
引导和跟踪空间到Superview
然后，我用以下方法约束每个按钮：
与高度相等
垂直空间到视图容器。
在这一点之后，无论我尝试什么组合，我都不能得到按钮之间的空间相等。我试着给他们施加水平间距限制，但这并没有起作用。附件是我想要创造的效果。有人能解释一下如何做到这一点吗？
浏览 3提问于2014-12-05得票数 2
5回答
我一直试图在一个固定高度和宽度的div内获得一个以文本为中心、水平和垂直的块。我也希望文本有一个半透明的黑色背景，如果可能的话，它能够延伸到2行。
我遇到的问题是，这条线不是垂直的，而文字后面的黑色背景在新行的开头做了一些奇怪的事情。
我目前得到的代码是：
<div class="description">
<span>Welcome to the world of beautiful design, technology and music.</span>
</div>
CSS
div.description {
浏览 8提问于2012-08-21得票数 0
回答已采纳
4回答
首先，我的CSS技能是...一项正在进行的工作。但到目前为止，我已经成功地将一堆列表项排列在网格中。
我现在想要做的是将列表项目居中。我曾尝试用inline替换float，但这会导致每个项目的width和height崩溃。我还想在每个列表项中水平和垂直居中文本，理想情况下省略(而不是一个单词)溢出文本。作为最后一个规范，如果可能的话，我只想将CSS修改为ul及其子对象。
浏览 4提问于2012-09-20得票数 1
回答已采纳
1回答
JQM:中间/对齐图标
、、、、
我需要一个200 pxx200px按钮大小，图标在中心(水平和垂直)。我可以创建200 px200 my大小，并使用我的个人图标。
我的问题是：！
如何在按钮中水平和垂直地对图标进行居中？
如果有人能帮我，我会很感激的。
干杯,
蒂莫
浏览 4提问于2012-08-04得票数 0
我试图达到的效果显示在附件中，但没有成功。甚至有可能吗？我试图把文本框内的无线电按钮，并设置为它的水平和垂直内容的别名，但它不是我想要的工作。欢迎任何建议。
浏览 3提问于2014-07-09得票数 2
回答已采纳
我有一个PHP代码
$keyboard = [
'inline_keyboard' => [['text' => $name, 'callback_data' => $placeId]],
];
$markup = json_encode($keyboard, true);
$content = [
'chat_id' => $chatId,
浏览 3提问于2016-05-23得票数 4
回答已采纳
3回答
我有一段文字将在长度和宽度上发生变化。我想通过css的方式，如果可能的话，它的水平和垂直，无论文本的长度是什么。
它永远都在中间。
如果文本不总是通过css更改，我知道如何对文本进行居中。我可以想象一种通过Javascript来实现它的方法，但是如果有一种方法可以通过css来实现，我想知道它。
下面是我的示例代码：
Html
<h1 id="description">Play</h1>
CSS
description{
height: 20px;
width: 60px;
text-align: cente
浏览 4提问于2014-02-22得票数 2
回答已采纳
我有两个按钮，我希望它们并排并排，在它们之间留出一点空间：
我最初是通过使用display: flex;和justify-content: space-between;来做到这一点的。
但是，我希望包装这两个按钮的块在整个页面上水平和垂直地居中。因此，我将所有内容都封装在父div中，并将display: flex; justify-content: center; align-items: center应用于父div。但是，这会导致重新设置按钮的间距。
如何在保持按钮间距的同时，使整个块在页面上水平和垂直地居中？
代码在这里和。
<div class="fo
浏览 2提问于2021-11-03得票数 0
回答已采纳
3回答
我不是CSS忍者，如果没有您的天才解决方案，我需要想出一些解决问题的服务器端解决方案，即：
我有一张照片。图像的大小是可变的。它可以是250x380或640x480或任何东西。，，我必须把一些文字放在图像的中心。它必须水平和垂直对齐。I需要一个HTML+CSS解决方案.好吧，任何对客户端有用的东西。
浏览 4提问于2012-06-15得票数 1
回答已采纳
我希望得到一些帮助，我有一个静态导航栏和一些按钮在右边，我有一个非常大的表，用户将与之交互。
用户最熟悉的是Excel一样的视图，其中顶部有一个带状(我的肚脐)，表在必要时是水平和垂直滚动的。
我已经有了表格来填充页面，并让引导静态导航条显示，但是，导航栏是重叠的表标题。
有什么简单的方法来解决这种重叠吗？
这里是引导操场链接，详细说明了我目前的情况。
浏览 4提问于2017-11-03得票数 0
回答已采纳
我试图在不知道高度/宽度的情况下水平和垂直居中div。我已经在jquery中实现了它，但我正在努力将它转换为纯js，因为我不想要依赖关系。有什么想法吗？
<script>
$(document).ready(mt);
$(window).resize(mt);
function mt(){
var contentLocked = $('.lockerPopup').outerHeight();
marginTop = ( $(document).height() - contentLocked ) / 2;
浏览 0提问于2015-09-02得票数 0
我正在尝试制作一个标题，它将有4个或5个按钮…我还不确定。
这些按钮的文本长度会有所不同，不同的设备也会有不同的宽度，还有每个设备的水平和垂直视图。因此，我不确定我的背景图像在高度和宽度方面应该是什么，以便一切都能很好地适合屏幕。
处理此问题的推荐或最佳实践方法是什么？
谢谢！！
浏览 1提问于2012-05-20得票数 0
回答已采纳
我们如何在这个div中对文本进行中心(水平和垂直)？
HTML
<div class="text">
hello is the the testhello is the the testhello is the the testhello is the the testhello is the the testhello is the the
testhello is the the tes
</div>
CSS
.text {
width:150px;
background:red;
float:left;
浏览 3提问于2014-04-11得票数 0
回答已采纳
我正在做一个计算器，我想让表格中的行和列的所有按钮水平和垂直对齐。它们现在水平对齐，因为我有行，但我想要垂直方向具有相同的大小，而不管我放在按钮中的是什么。谢谢。
浏览 0提问于2014-02-10得票数 2
我想做一个页面(HTML + CSS)，适合所有的空间，在浏览器上没有水平和垂直滚动条。
现在你正在网络浏览器上阅读这个问题，你可能会看到水平滚动条。我想在不使用水平和垂直滚动条的情况下使用此空间。
浏览 1提问于2010-01-12得票数 1
回答已采纳
我有一个div，它包含一个覆盖了文本的图形背景。我想水平和垂直居中这个元素。但是我不能让文本垂直居中。到目前为止，我有以下代码：
<div id="step">
<div id="background">
<img src="buttonbackground.png" class="stretch" alt="" />
</div>
<div>
<h3>some text</h3>
浏览 0提问于2012-02-24得票数 1
回答已采纳
3回答
我正在尝试使用来实现一个水平和垂直居中的div，它保持浏览器100%的宽度和高度，其中文本应该垂直和水平居中对齐，但目前文本的顶行是居中对齐，而不是整个中心点在3行文本的中心。
有人知道怎么做到这一点吗？
我的HTML：
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Regret</title>
<meta charset="utf-8">
<link href='http:
浏览 2提问于2011-12-20得票数 1
回答已采纳
4回答
我将如何使图像变暗(添加半透明的覆盖层)并将文本添加到此图像(但以水平和垂直方向为中心)如下：
<img src="http://luxurylaunches.com/wp-content/uploads/2014/05/uber-london.jpg" id="top" data-appear-animation="fadeIn">
CSS
#top {
width: 100%;
height: auto;
}
body {
margin: 0px;
}
小提琴：
浏览 9提问于2014-11-26得票数 3
回答已采纳
2回答
我尝试在chrome和safari中水平和垂直居中选择框。
这是jsfiddle - [http://jsfiddle.net/xeqLsdo6/]
问题是，即使在firefox中，文本在Chrome和Safari中也不是垂直对齐的。
提前谢谢你。
浏览 3提问于2015-05-26得票数 0
对于CSS，我们知道垂直边距会折叠，例如：
(div之间的垂直边距仅为30px。)
但是浮动div呢？为什么垂直边距不会崩溃？
示例：
(div之间的水平和垂直边距都以60px结尾)。
浏览 0提问于2011-06-03得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
