居中我的文字，但保持左对齐？
[英]Center my text, but keep left align?
问题描述
Im trying to make my links on my page left-aligned but centered on the page.
我试图让我的页面上的链接左对齐但居中。 How do I do this?我该怎么做呢？ I have tryed many ways and googled many more I haven't been codeing very long and this is becoming a real strugle.我尝试了很多方法并在谷歌上搜索了更多我没有编写很长时间的代码，这正在成为一场真正的斗争。
This is my Html code这是我的 Html 代码
<!DOCTYPE html>
<html>
<head>
<Title> Conspiracy Theories </Title>
</head>
<link href="mystyle.css" type="text/css" rel="stylesheet">
<Body>
<img src="http://media.moddb.com/images/groups/1/9/8589/tin_foil_hat.gif" />
<a <link href="WP1.html" type="text/html" style="text-decoration:none" rel="html"> EmDrive is being tested on the X-37B</a></li>
<a <link href="WP2.html" type="text/html" style="text-decoration:none" rel="html"> Diesel Submarines</a></li>
<a <link href="WP3.html" type="text/html" style="text-decoration:none" rel="html">Lethal B-21 vs. B-2 Stealth Bomber</a></li>
<a <link href="WP4.html" type="text/html" style="text-decoration:none" rel="html"> Air Force Wants a New Fighter</a></li>
<a <link href="WP5.html" type="text/html" style="text-decoration:none" rel="html"> King Tiger Tank : Super Weapon or Super Myth?</a></li>
<a <link href="WP6.html" type="text/html" style="text-decoration:none" rel="html"> Ground Combat Vehicle (GCV)</a></li>
<a <link href="WP7.html" type="text/html" style="text-decoration:none" rel="html"> 3 service men killed</a></li>
<a <link href="WP8.html" type="text/html" style="text-decoration:none" rel="html"> US intercepts 2 Russian bombers</a></li>
<a <link href="WP9.html" type="text/html" style="text-decoration:none" rel="html"> World reacts to US strikes</a></li>
</div>
</div>
</Body>
<h1> </h1>
The css css
img {
padding-bottom: 30px;
display: block;
margin: auto;
width: 10%;
}
a {
line-height: 1.7em;
display:block;
margin-left: auto;
text-align: center;
color: black;
}
body {
background-image:
url("https://presentations.inxpo.com/SharedContent/VX/images/background-
shell.jpg");
}
4 个解决方案
解决方案1
0 2017-04-24 20:38:09
Like this? 像这样？ I also cleaned up your html a bit. 我也清理了你的HTML。 You can play around with the width on the ul.container , this will move the 'list' to the left or right. 您可以在ul.container上使用宽度，这会将“列表”向左或向右移动。
img { padding-bottom: 30px; display: block; margin: auto; width: 10%; } a { line-height: 1.7em; display: block; margin-left: auto; color: black; text-decoration: none; } ul.container { text-align: left; margin-left: auto; margin-right: auto; width: 60%; list-style-type: none; padding: 0; } main { background-image: url("https://presentations.inxpo.com/SharedContent/VX/images/background- shell.jpg"); }
<!DOCTYPE html> <html> <head> <Title> Conspiracy Theories </Title> <link href="mystyle.css" type="text/css" rel="stylesheet"> </head> <main> <img src="http://media.moddb.com/images/groups/1/9/8589/tin_foil_hat.gif" /> <ul class="container"> <li><a href="WP1.html" type="text/html"> EmDrive is being tested on the X-37B</a></li> <li><a href="WP2.html" type="text/html"> Diesel Submarines</a></li> <li><a href="WP3.html" type="text/html"> Lethal B-21 vs. B-2 Stealth Bomber</a></li> <li><a href="WP4.html" type="text/html"> Air Force Wants a New Fighter</a></li> <li><a href="WP5.html" type="text/html"> King Tiger Tank : Super Weapon or Super Myth?</a></li> <li><a href="WP6.html" type="text/html"> Ground Combat Vehicle (GCV)</a></li> <li><a href="WP7.html" type="text/html"> 3 service men killed</a></li> <li><a href="WP8.html" type="text/html"> US intercepts 2 Russian bombers</a></li> <li><a href="WP9.html" type="text/html"> World reacts to US strikes</a></li> </ul> </main> <h1> </h1>
解决方案2
0 2017-04-24 20:42:09
Here is a working fiddle I added a container that is the width of the nav items with the display: inline-block; 这是一个工作小提琴我添加了一个容器，它是导航项的宽度， display: inline-block; property. 属性。 This div is wrapped and centered with the text-align: center; 这个div用text-align: center;包裹并居中text-align: center; property. 属性。 I changed the a text alignment from center > left to make the left aligned inside the div. 我从中心>左侧更改a文本对齐方式，使左侧对齐div。 I would also validate the HTML because it looks like there is some error inside your code. 我还要验证 HTML，因为它看起来代码中有一些错误。
Check out this question for more information about a good HTML boilerplate. 有关良好的HTML样板的更多信息，请查看此问题。 A good HTML skeleton 一个很好的HTML骨架
Also check out this page if you want to clean up your code a bit DirtyMarkup 如果您想要清理代码DirtyMarkup，请查看此页面
HTML HTML
<!DOCTYPE html>
<html>
<head>
<title>
Conspiracy Theories
</title>
<link href="mystyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<img src="http://media.moddb.com/images/groups/1/9/8589/tin_foil_hat.gif">
<div class="text-center">
<div class="display-inline">
<a><link href="WP1.html" rel="html" style="text-decoration:none" type="text/html">EmDrive is being tested on the X-37B</a>
<a><link href="WP2.html" rel="html" style="text-decoration:none" type="text/html">Diesel Submarines</a>
<a><link href="WP3.html" rel="html" style="text-decoration:none" type="text/html">Lethal B-21 vs. B-2 Stealth Bomber</a>
<a><link href="WP4.html" rel="html" style="text-decoration:none" type="text/html">Air Force Wants a New Fighter</a>
<a><link href="WP5.html" rel="html" style="text-decoration:none" type="text/html">King Tiger Tank : Super Weapon or Super Myth</a> <a><link href="WP6.html" rel="html" style="text-decoration:none" type="text/html">Ground Combat Vehicle (GCV)</a>
<a><link href="WP7.html" rel="html" style="text-decoration:none" type="text/html">3 service men killed</a>
<a><link href="WP8.html" rel="html" style="text-decoration:none" type="text/html">US intercepts 2 Russian bombers</a>
<a><link href="WP9.html" rel="html" style="text-decoration:none" type="text/html">World reacts to US ></a>
</div>
</div>
</body>
</html>
CSS CSS
.text-center {
text-align: center;
}
.display-inline {
display: inline-block;
}
a {
text-align: left;
}
解决方案3
0 已采纳 2017-04-24 21:09:33
This is a sample solution. 这是一个示例解决方案。 I wrapped the links in a div to make this work. 我将链接包装在div中以使其工作。 I hope it helps 我希望它有所帮助
body { background-image: url(https://presentations.inxpo.com/SharedContent/VX/images/background-shell.jpg); display: flex; flex-wrap: wrap; flex-direction: column; } img { padding-bottom: 30px; display: block; margin: auto; width: 10%; } body > div { text-align: left; margin: 0 auto; } a { line-height: 1.7em; display: block; color: black; }
<!DOCTYPE html> <html> <head> <Title> Conspiracy Theories </Title> </head> <link href="mystyle.css" type="text/css" rel="stylesheet"> <Body> <img src="http://media.moddb.com/images/groups/1/9/8589/tin_foil_hat.gif" /> <div> <a link href="WP1.html" type="text/html" style="text-decoration:none" rel="html"> EmDrive is being tested on the X-37B</a> <a link href="WP2.html" type="text/html" style="text-decoration:none" rel="html"> Diesel Submarines</a> <a link href="WP3.html" type="text/html" style="text-decoration:none" rel="html">Lethal B-21 vs. B-2 Stealth Bomber</a> <a link href="WP4.html" type="text/html" style="text-decoration:none" rel="html"> Air Force Wants a New Fighter</a> <a link href="WP5.html" type="text/html" style="text-decoration:none" rel="html"> King Tiger Tank : Super Weapon or Super Myth?</a> <a link href="WP6.html" type="text/html" style="text-decoration:none" rel="html"> Ground Combat Vehicle (GCV)</a> <a link href="WP7.html" type="text/html" style="text-decoration:none" rel="html"> 3 service men killed</a> <a link href="WP8.html" type="text/html" style="text-decoration:none" rel="html"> US intercepts 2 Russian bombers</a> <a link href="WP9.html" type="text/html" style="text-decoration:none" rel="html"> World reacts to US strikes</a> </div> </Body> </html>
解决方案4
0 2022-10-10 02:52:29
#app { /* step 2: center the text container in a flex box */ display: flex; justify-content: center; } /* step 3: be stylish */ #app, body, html { background: skyblue; color: royalblue; }
<div id="app"> <:-- step 1: wrap the text in a display:block element --> <div> <h2>foo bar</h2> <h2>lorem ipsum</h2> <span>hey hey</span><br /> <span>blah blah blah</span> </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
在div的左侧也将其对齐 - Align text at left but also at center of my div
如何使文本居中并保持对齐？ - How can I center a text and keep being left align?
在单元格中心对齐内容，但保持文本左对齐 - Align content within center of cell but keep left alignment of text
对齐列中居中的文本 - align text left in the column and in the center
如何将我的文本从中心向左对齐？ - How can align my text from center to left?
文字左对齐但div居中 - Text align left but div center
左对齐div，然后居中对齐底部文本 - Left align div, then center align bottom text
居中对齐按钮但左对齐内部文本 - Center align buttons but left align the text inside
HTML/CSS 向左对齐但保持居中 - HTML/CSS align to left but keep center
居中对齐文本下方的左对齐文本 - Left align text below center aligned text
相关标签