如何使用javascript、css和/或html在表格单元格中的图像上居中显示文本？
我有一个包含图像的HTML表-所有图像的大小都相同-并且我想在每个图像上居中放置一个文本标签。标签中的文本大小可能不同。水平居中并不难，但垂直居中却很难。
附录:我最终不得不使用javascript使用固定大小的div和绝对定位来可靠地将文本居中；我只是无法让它以任何其他方式工作。
浏览 2提问于2008-09-18得票数 1
回答已采纳
7回答
我想“居中”我的网页的文本和内容。现在我不想让文本居中对齐，我仍然想要左对齐，但我希望在左右两边都有明显的页边距，这样所有内容看起来都相对居中。你能给我演示一下实现这一点的HTML/CSS吗？谢谢。
浏览 0提问于2009-05-19得票数 5
目前，我正在尝试将我在Joomla 2.5.x中制作的四(4)个自定义html-boxes居中对齐，以便能够在其中一个或多个框未发布后将它们自己居中。
到目前为止，我已经尝试在一篇文章中创建了一个“div”(带有一个类)，我用{loadposition name}加载了四(4)个自定义html-boxes中的每一个。但是当我这样做的时候，页面中间的方框会在彼此的下方居中。
在下面的例子中，这是我想让Joomla做的:我做了五(5)个框，每个框都是自定义的html。然后使用以下方法将它们加载到一篇文章中：qB48w。在这里，当用户取消对一个框的注释时，其余的框自动居中。
有了上面的例子，我希望能
浏览 5提问于2015-02-18得票数 0
2回答
我想知道如何将3张图片水平居中。我知道如何让它们水平对齐，但后来我失去了我的中心。所以我把图片水平排列，但是我想尽一切办法让它们居中，但都没有真正起作用。所以我真正想要的是，中间的一个居中，另外两个在它的一侧，间隔均匀，如果这样做的话。
<!DOCTYPE html>
<html>
<head>
<title>Anchor</title>
<link rel="stylesheet" href="main.css&#
浏览 1提问于2015-10-04得票数 0
3回答
HTML
<div>Test</div>
CSS
div {
text-align: center;
width:200px;
margin-left:20px;
}
我不想让文本居中，而是稍微向右/向左推。这个是可能的吗？
浏览 1提问于2014-04-18得票数 1
回答已采纳
如何让div在没有脚本的情况下水平和垂直居中？只在CSS和HTML5上？
<div id="center"></div>
#center{width:500px; height:300px;}
浏览 1提问于2011-08-24得票数 1
回答已采纳
3回答
我有3个超链接。我希望一个向左对齐，一个居中对齐，最后一个向右对齐；所有这些都对称地放在一行上。我使用ALIGN=“居中”等将标题居中，但经过一些研究后，我发现元素(A)并不一定将其识别为命令。那么，让这些超链接按我需要的方式对齐的正确方法是什么呢？这实际上是我第一天使用HTML或任何一种编程语言。感谢您的帮助和耐心，谢谢。
浏览 3提问于2015-03-05得票数 0
我正在努力从以网页为中心的100个小部件中检索到一个对象。是个钟。我在TeamSite工作。物体不能正确地居中。当我键入HTML编码来对对象进行居中时，预览模式会将其更改为居中，但是当我发布项目时，网站将不会反映调整的“活动”。它保持左对齐；除非在预览模式下，它将保持正确的居中。
这就是我所拥有的(非常简单，所以它让我发疯了！)：
<div style="width: 50%; margin: 0 auto;">
<script type="text/javascript" src="http://100widgets.co
浏览 0提问于2017-01-17得票数 0
2回答
我正在尝试在一个940px宽的页面中居中对齐一个div中的图像。
<div class="header">
<img class="logo" href="x"/>
<ul class="topLinks">
<li>blah</li>
</ul>
</div>
我让"topLinks“ul漂浮在右边。我想居中的标志类相对于整个940px页面。我能够使徽标居中的唯一方法是使用html属性'align
浏览 1提问于2011-07-04得票数 0
7回答
如果我在普通浏览器中打开我的(GWT)页面，一切都正常。正文占据整个宽度，内容居中。但如果我在手机上尝试，正文不会占据整个宽度，因此内容不会居中。
我不知道为什么它是这样显示的。另外，给body和html标签增加100%的宽度也不能解决这个问题。
有没有办法让它在移动设备上很好地工作？
可以在以下位置访问该页面：
浏览 0提问于2015-05-21得票数 35
考虑一下这样一个简单的网页：
<!DOCTYPE html>
<html><head><title>Test!</title></head>
<body>
<p>a b c</p>
</body></html>
我想让as格式化，就像我用a\hfill b\hfill c编写TeX一样。这是:a在左边，然后b居中，然后c在右边；所有在同一行。我该怎么做？
浏览 2提问于2013-02-17得票数 18
回答已采纳
我有一个页面，我想居中，有一个背景和整个内容周围的边界。
我创建了一个div，并设置了我想要的背景颜色和边框设置。
问题是它里面有浮动的div，背景没有围绕浮动的div拉伸。我能让它工作的唯一方法就是设置position:absolute。然后，边界确实围绕浮动did展开，但我无法使用常规的html/css将它们居中。
我发现了一个javascript hack来使它居中，但它只是在页面加载后才居中，而且看起来很糟糕。
我相信有一种方法可以让容器扩展，同时保持它的中心位置，我只是想不出来。
下面是一个分享我的问题的示例html页面
<div style="background-c
浏览 1提问于2009-05-20得票数 5
回答已采纳
4回答
我有一些文本在我的html网站上使用div标签，所以我可以居中的文本，但它不会居中。
这是我放入HTML中的内容
<div id="info">
Welcome
</div>
这是我放在CSS中的内容
#info {
color: #0F0;
font-size: 20px;
text-align: center;
}
我已经使用了正确的css代码来居中文本，但由于某些原因，它不会居中。有谁有什么想法吗？
浏览 42提问于2017-02-12得票数 1
3回答
我在生成HTML/CSS布局时遇到问题。考虑这一点的最好方法是采用正常的水平居中页面布局。我只想让一个div从居中布局延伸到浏览器窗口的右边缘。
这应该可以流畅地与浏览器窗口大小调整一起工作。
浏览 0提问于2012-10-28得票数 2
回答已采纳
4回答
我想在浏览器中显示一幅图像，这样：
如果图像小于浏览器视图，则图像以水平和垂直方向居中。
如果图像大于视口，则缩小图像以填充尽可能多的视口，而不调整图像的纵横比。同样，图像是以水平和垂直方向居中。
我不想使用JavaScript；最好的/最语义的HTML和CSS是什么？
更新我被要求澄清语义:图像是内容，是HTML中的唯一内容。
解决方案
@GionaF的想法让我找到了一个快乐(非常简单)的解决方案：
HTML
<!DOCTYPE html>
<head>
<title></title>
<LINK href=
浏览 6提问于2012-09-30得票数 13
回答已采纳
我想将标题居中放置在Silverlight DataGridTemplateColumn上。下面的代码让我大体上做到了：
DataGridTemplateColumn column = new DataGridTemplateColumn();
column.CellTemplate = Resources[templateName] as DataTemplate;
column.Header = headerName;
column.HeaderStyle = new Style { TargetType = typeof(DataGridColumnHeader) };
column.H
浏览 0提问于2010-05-20得票数 2
回答已采纳
我试图将一些文本和一个表单(文本输入和提交按钮)放在一个已经居中的图像上。
我的HTML/CSS有三个项目居中，但一个接一个，即图像居中，文本居中，输入表单在下方。
您能告诉我如何在居中的图像上居中显示文本和表单吗？以上的目标是，如果浏览器窗口的大小发生变化，则这三个项目将保持在一起居中。
注意:在我尝试居中的三个项目之上，我还有其他图像和文本
我的HTML如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm
浏览 0提问于2012-04-30得票数 1
回答已采纳
2回答
CSS定位和重叠
、、、
我有一个HTML页面的CSS生成的部分。它当前位于页面的主内容区域中，该区域位于导航栏的右侧。我有一个图形，它需要居中到整个HTML页面，包括在导航栏下。
如何使用CSS定位来覆盖HTML代码块(它也有一些CSS )，使其在整个页面上居中。
我有一种预感:我想我需要重叠的CSS部分去导航栏下面。
.layout #mainContent h6 {
position:absolute;
left:-1000px;
top:-10px;
z-index:5
}
要覆盖的超文本标记语言将位于h6之下。
HTML将按如下方式编写
<h6>
All the HTML code t
浏览 0提问于2011-10-28得票数 0
回答已采纳
这听起来很奇怪，我知道，但是我很难让一段文本稍微下移一点，这样它就会居中于它所在的标签上。
它看起来是这样的：
我希望购买垂直居中。
下面是html：
<div class="row-2">
<ul>
<li><a href="index.html" class="active">Buy</a></li>
</ul>
</div>
浏览 7提问于2011-04-08得票数 19
回答已采纳
我正在尝试在ScrollView中对齐一些内容。我想让这个内容的一部分居中，另一部分对齐到我的屏幕的领导。我不明白为什么我下面的代码不能工作，我的内容似乎是居中的，没有占据整个宽度。我确实试过设置宽度，但都不起作用。你知道如何让我的Text("center")居中，让我的hello's列表在左边吗？
下面是我当前的代码：
struct ReportView: View {
var body: some View {
NavigationView {
ScrollView(.vertical) {
浏览 0提问于2020-10-26得票数 0
3回答
顺便说一下，我正在使用GitHub页面。无论如何，我不能让我的生活让这件事起作用！
这是我的html代码( youtube页面的链接)：
<a href="notgoingingtoshowthislink" target="_blank">Youtube</a>
我的CSS：
a {
text-align: center;
color: #ffffff;
font-size: 30px;
font-family: Helvetica;
top: 550px;
}
到目前为止，链接是白色和适当的大小，它只是没有居
浏览 1提问于2015-03-08得票数 0
回答已采纳
我有一个pandas DataFrame，正在使用DataFrame.to_html方法生成一个可以在HTML email消息中发送的表。我只想让某些列中的值居中，但也想知道如何将格式应用到表中。在使用to_html之前，我已经尝试应用找到的文档以及使用df.style，如下所示：
df.style.set_properties(**{'text-align':'center'})
但是我仍然让我所有的值左对齐(除了头，它是居中的)。
将所有列值(或列值的子集)居中的正确方式是什么，还有哪些可用于格式化的其他选项？(例如，加粗文本、更改背景或边框颜色等)
此外，
浏览 3提问于2018-04-18得票数 4
回答已采纳
6回答
首先，我很抱歉。我知道这里有各种各样的解决方案，但对于我的生活，我无法让他们任何一个工作。
对于一个响应性的网站，我试图把一个h1放在一个div中。
水平居中不是问题，但我很难让它垂直地居中。我可能做错了什么，或者误解了我在这里找到的解释(或者两者兼而有之)。
因此，由于我可能是以错误的方式解释早期的解决方案，请有人解释一下，我需要在下面的代码中添加什么才能使h1垂直地居中？
(为了使这个问题与尽可能多的人相关，我已经删除了之前所有尝试的代码。)
CSS：
html, body {
height: 100%;
margin: 0;
}
#section1 {
min-height: 90%;
浏览 6提问于2013-12-13得票数 61
回答已采纳
1回答
我是世界上最差的造型师，所以让我们现在就开始吧。
我很难找到正确的类来让第一个动作链接在页面上居中(或多或少)。我已经尝试了我的第一个ul的变体，比如on sm-6和text-right，但都没有用。一些向右拉的动作，这不是我想要的。
<div id="bootstrapSOLmenu" class="navbar navbar-default">
<div class="container">
<div class="navbar-collapse colla
浏览 11提问于2020-05-16得票数 0
我有这个代码，我试图让它居中的页面，但它不工作。我不知道该在哪里放置标记或调用css来居中显示此打印结果。当我将center“id=”添加到时，它也会将表单居中，但我只想将打印输出居中。请帮帮忙。
<p class="name">
<input type="text" name="name" id="name" value="
<?php if (isset($_POST['fname'])){
print htmlspecialchars(
浏览 2提问于2013-03-19得票数 0
2回答
我可能在这里遗漏了一些非常简单的东西，但请耐心等待。
我想要的是一个div，填满父div宽度的100% (不会更多)，在父div中垂直居中，包含应该水平滚动而不是换行的内容。内部div和父div都有可变的高度。
我已经设法让内部div在没有包装的情况下滚动它的内容，方法是对它应用这个CSS：
.content {
white-space: nowrap;
overflow: auto;
}
我尝试用下面的CSS在其父div中垂直居中：
.container {
height: 500px; /* For testing purposes. */
display:
浏览 0提问于2010-11-15得票数 2
回答已采纳
5回答
我一直在建立一个网站，但不知道如何将导航链接居中。该站点是使用CSS表的HTML格式。
我试着把它们放在中心位置
margin: 0 auto;
任何建议都是很棒的！
站点地址为
如果你想让我粘贴所有的代码到这里，然后请要求，但我觉得没有必要，因为代码是开放的可从查看源代码
浏览 0提问于2012-02-08得票数 0
1回答
我已经看到过类似的问题，我一直在尝试让代码适合我自己的情况，但我就是找不到解决这个问题的方法。
我需要一个居中的水平导航栏有一个下面的文本图像。我已经把所有的东西都准备好了，我只是不能让列表作为一个整体在页面中居中。
这是我的css：
#mainnav {
width: 100%;
text-align: center; }
#mainnav ul {
list-style-type: none;
text-align: center;}
#mainnav li {
display: inline;
float: left;
text-align: center;
margin-left:
浏览 1提问于2013-12-03得票数 0
2回答
我需要在页面中间放置一个宽度和高度未知的div。我可以让它以宽度居中，但可以让它以高度居中吗？
HTML：
<div class='lightbox'>
<div class='tc-content'>AAA</div>
</div>
CSS
.lightbox {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: #000;
text-align
浏览 0提问于2014-12-03得票数 0
为什么我的文本有调整效果？在我的整个站点中，我制作了回显，并且我没有指定“text -align: justifying；”，但是我的文本仍然是对齐的。对齐是指当您缩小浏览器窗口时，文本会移动以适合窗口大小。我试着做这样的东西：<?php echo "<h1>some stuff.</h1>"; ?> <html> <head> <style> h1 { text-align:center; }等等……
但它只是让文本居中，并保持对齐效果。
请帮我=[谢谢
浏览 7提问于2010-04-07得票数 0
回答已采纳
2回答
我有一个按钮，我想在ionic中居中，我已经尝试了文本对齐: center！重要，但它不会随着它上面的项目居中，让它看起来很奇怪。如何将“稍后可能”按钮与其上方项目的文本很好地居中
下面是我尝试过的html
<ion-content no-padding>
<ng-container style = "text-align: center;" *ngIf = "nextOptions == 'previous'">
<ion-item lines="none" no-p
浏览 0提问于2019-11-25得票数 5
回答已采纳
当浏览器窗口缩小时，站点标题会移到导航窗口的底部，而不是居中。
问:有没有人知道如何让站点标题在导航栏中居中，直到浏览器窗口足够小，使其位于列表项之上？
我的代码在这里：
站点标题的HTML代码为：
<span><a href="index.html" class="logo" id="home">Hyperdog Productions</a></span>
谢谢!
浏览 2提问于2015-07-29得票数 1
我几乎完成了我的第一个应用程序，但我仍然在处理一些小问题。
我的主要问题是，我正在加载一个普通的html页面，但我无法访问html代码。
现在我想在webview模块中将页面居中，因为页面也居中，所以当我加载页面时，我必须一直滚动到右侧，这真的很棒。
那么我该怎么做，让webview模块自动加载已经居中的页面，并且应用程序的用户看到页面的中间位置？
浏览 0提问于2012-05-10得票数 0
这里有谁知道如何让文本居中，如果文本太长，让它们比左/右HTML单元格溢出？请参阅附件：
浏览 1提问于2011-07-15得票数 0
回答已采纳
1回答
我正在尝试让我的网站根据屏幕的大小而流动。我创建了这个：。它工作得足够好了。内部的两个div在同一行中居中并且相邻，当它们匹配时-但当它们不匹配时，它们在各自的行中居中。
这是HTML。CSS和JavaScript也在其中。
<div class="divContainer">
<div class="div1">
<img src="http://placehold.it/200x300/EEEEEE/000000" />
</div>
<div class="d
浏览 3提问于2013-05-30得票数 2
回答已采纳
我想出了如何让图像在表格中缩放，但无法让任何东西在表格上居中。
在此处设置演示-
td#divison00,
td#division01 {
display: table;
table-layout: fixed;
}
.standingslogo {
width: 100%;
max-width: 100%;
}
我需要让它们具有可伸缩性，但又居中。不确定是否可能，而且我没有更改任何现有HTML的授权。
浏览 1提问于2015-05-14得票数 0
1回答
我正在创建一个水平滚动页面，我想知道最好的技术是让每个内容div在页面上居中，而不是像我在Google中遇到的所有例子一样左对齐。
我尝试过这段代码，但没有成功：
var wind = $(window).width();
$(".section").width(wind);
$(window).resize(function(){
var windRe = $(window).width();
$(".section").width(windRe);
});
。现在，我只是想让内容变得居中。显然，如果它不是水平滚动，我可以只使用
浏览 1提问于2012-03-08得票数 1
回答已采纳
3回答
我想知道如何使这个居中，它挂起了，我想让它像这个一样居中，这样灰色部分就会进入边界。下面是css代码和它的html : css：
#banner{
height: 279px;
width: 998px;
margin-right: 0px;
margin-left: 0px;
background-image:
url(/template/default/images/layout/background/newlayout/test.png);
}
html：
<div id="banner" ></div
浏览 1提问于2012-10-21得票数 3
回答已采纳
如何让遮罩div中的center div居中对齐？ 样式： <style type="text/css">
.mask {
position: absolute; top: 0px;
filter: alpha(opacity=60);
background-color: #777;
z-index: 1002; left: 0px;
opacity:0.5; -moz-opacity:0.5;
width: 100%;
height: 100%
浏览 50提问于2018-07-20得票数 0
回答已采纳
1回答
这可能看起来像通常的如何居中一个浮动问题，但我需要将一个浮动div居中的原因是因为其他div容器也有一个浮动属性。我已经设置了一个高度自动来确定高度依赖于包装器div内的对象，在包装器div内有2个浮动div使其并排。然而，如果我没有在包装器上指定一个浮动，包装器div将只显示一行直线(不包装任何东西)
div.wrapper{
width: 1000px;
height: auto;
margin-top: 30px;
float: left;
border:1px solid gray;
}
div.leftcontainer{
width: 200px;
height: auto;
m
浏览 0提问于2012-01-16得票数 0
2回答
我意识到垂直居中是一个经常出现在这里和其他网站上的话题，但我仍然是HTML的新手，即使在阅读了这个话题后，我仍然感到困惑。
我已经尝试为一个包含h1标题和导航链接的导航链接的网站创建了一个简单的header元素。下面是html：
<!doctype html>
<html>
<head>
<title>Sample website</title>
<link href="css/homepage.css" rel="stylesheet" type="text/css&#
浏览 0提问于2013-08-23得票数 0
2回答
我想在css中叠加两个文本。
我写了以下内容：
HTML：
<div id="container" >
<span id="w1" >One text</span>
<span id="w2" >And another superimposed to the first</span>
</div>
CSS：
#container
{
position:relative;
}
#w1,#w2
{
position:absolute;
to
浏览 2提问于2012-08-18得票数 0
回答已采纳
任何帮助都将不胜感激！
我正在处理的页面在这里
我想要做的就是让背景图像伸展到100%的高度，而不管观众的屏幕大小，同时保持图像在页面上始终水平居中。到目前为止，我已经弄清楚了100%的高度，但我一直试图弄清楚如何水平居中-目前它是固定的左侧: 0px；我认为这应该很简单。我的代码如下，也许这不是正确的方法。谢谢!
<style type="text/css">
#background {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1;
}
.str
浏览 0提问于2011-08-23得票数 1
回答已采纳
4回答
我正在尝试让提交按钮居中页面。我的html代码是：
<div class="container-fluid">
<div class="row" style="margin-right:0;margin-left:0">
<form method="POST"
action="https://api.instagram.com/oauth/authorize/redirect_uri=http://hanie-asemi.ir/laravel/public/instagram/
浏览 0提问于2017-07-08得票数 1
当我想在居中的父div中向左或向右浮动子div时，整个设计会向左或向右移动，具体取决于浮动。那么，如何浮动子div，并使居中的父div居中。
HTML：
<div id="parent">
<div id="child-left"></div>
<div id="child-right"></div>
</div>
CSS：
#parent{
padding: 0 auto;
width: 600px;
}
#child-left{
float: le
浏览 3提问于2012-10-10得票数 4
回答已采纳
当地址栏和工具栏显示时，我想在iPhone上垂直居中放置一个div。当浏览器全屏时，我可以让它在风景中工作……
但是一旦工具栏出现，div就不会居中。
有没有办法在不使用Javascript的情况下使div相对于窗口的可见部分居中？
下面是我当前的代码：
body,
div {
margin: 0;
padding: 0;
}
div {
width: 100%;
height: 50px;
position: absolute;
top: calc(50vh - 25px);
background-color: yellow;
}
<!D
浏览 0提问于2015-03-02得票数 2
您好，感谢您关注我的问题，
我非常努力地把这个链接放在bootstrap中的一个模式上。我没有使用网格系统或行。在模式中有一个BS旋转木马，我可以用margin:0 auto;将元素居中
这是一个可视化的链接在哪里，它顽固地停留在模式的左侧。
链接应该在转盘指示器的正下方。
HTML代码片段：
.
.
.
<div>
<ol>
<li> data-slide-to="1"></li>
<li data-target="#home-price-guide-carousel
浏览 1提问于2016-02-29得票数 1
如何使网页的标题居中。下面是我写在纸上的代码： ? 我想把我的书名“自由国家”的标题居中 写出来的代码没有图像： <!DOCTYPE html>
<html>
<head>
<title>"Libertarian Nation"</title>
</head>
<body>
A place of decentralisation
</body>
</html> 那么，我如何才能使页面标题居中呢？
浏览 25提问于2021-03-24得票数 0
2回答
我已经看过其他一些答案，但无法让它们适用于我的特定情况。我已经简化并包含了下面的整个代码块。基本上，它只在蓝色框中显示文本。我想知道如何使盒子居中。
<!DOCTYPE html>
<html>
<head>
<style type="text/css"><!--
#content {
width:500px;
padding: 10px 10px 10px;
background-color: #D1ECFF;
position: relative;
border-radius: 10px;
-webki
浏览 1提问于2012-01-22得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
