center 相关问题

HTML中的中心标记使其内容在父元素中居中。它已弃用,不应再使用。

使浮动子项在溢出之外可见:隐藏父项

在 CSS 中,overflow:hidden 设置在父容器上,以允许其随着浮动子容器的高度而扩展。 但与 m 结合时,它还有另一个有趣的功能...

回答 7 投票 0

为什么文本不对齐:居中;将我的 class="text5" 移到中心?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Homepage</title> <link href="style.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="logo"><h2>Header Logo</h2></div> <div class="navbar"> <ul> <li><a href="index.html">header link one</a></li> <li><a href="index.html">header link two</a></li> <li><a href="index.html">header link three</a></li> </ul> </div> <div class="text1"><h2>This website is awesome</h2></div> <div class="text2">This website has some subtext that goes here under the main title.It's a smaller font and the color is lower contrast <div class="button1"> <div class="text4">Sign up</div> </div> </div> <div class="placeholder"> <div class="text3">this is a placeholder for an image</div> </div> </div> <div class="container2"> <div ID="text5"class="text5"> Some random information. </div> <div class="box1" id="box1"></div> <div class="box2" id="box2"></div> <div class="box3" id="box3"></div> <div class="box4" id="box4"></div> </div> <div class="footer"> Copyright © The Odin Project 2023 </div> </body> </html> * { margin: 0; padding: 0; box-sizing: border-box; } .container { width: 100%; height: 45vh; background-color: #1f2937; position: static; display: flex; } .footer { position: absolute; bottom: 0px; width: 100%; height: 10vh; background-color: #1f2937; color: white; text-align: center; display: flex; justify-content: center; align-items: center; } .logo { font-size: 24px; font-family: 'Times New Roman', Times, serif; color: white; justify-content: space-between; padding-top: 15px; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; padding-left: 200px; position: absolute; top: 0; } .navbar { color:white; font-size: 18px; position: fixed; width: 85%; top: 0; right: 0; margin: auto; display: flex; align-items: center; justify-content: flex-end; flex-direction: row; padding-top: 15px; padding-right: 330px; } .navbar ul li { list-style: none; display: inline-block; margin: 0 20px; text-decoration: none; } .text1 { position: relative; color: white; padding-left: 200px; font-size: 48px; font-weight: bold; width: 720px; top: 100px; } .text2 { position: relative; color: white; font-size: 18px; width: 400px; height: 200px; top: 300px; right: 520px; } .placeholder{ position: relative; width: 500px; height:250px; background-color: grey; border: 2px solid grey; display:flex; top: 100px; right: 120px; align-items: center; justify-content: center; color: white; } .button1{ border-radius: 5px; position: relative; display: flex; font-weight: bold; border: 2px solid #3882F6; background-color:#3882F6; height:40px; width: 120px; justify-content: center; align-items: center; } .container2{ height: 45vh; background-color: white; position: relative; padding-top: 30px; display: flex; flex-direction: row; justify-content: space-evenly; } #text5{ font-size: 36px; font-weight:800; text-align: center; } #box1, #box2, #box3, #box4{ position: relative; border: 2px solid #3882F6; height: 100px; width: 100px; bottom: -100px; right: 250px; border-radius: 25px; flex: 0 0 100px; } 为什么 class="text5" 不将文本移向中心?截至目前,文本位于左侧。 我尝试过 text-align=center 但没有产生任何结果。和级联有关系吗?我还尝试在其上设置宽度和边距:0 auto;这将文本移动但没有移动到中心并弄乱了我的框的间距。 Text5 是 Container2 的子级,Container2 是一个 Flexbox。 Flexbox 控制其子项的水平位置。 也许您想将 Text5 移到 Container2 之外?也许在它之前?

回答 1 投票 0

显示Flex水平居中问题

我在将 div 中的元素居中时遇到问题。 我使用 display flex、align-self 和 justify-self 将其居中。 我认为这样就可以了,但是当我从 t 检查时,我有一个未知元素......

回答 4 投票 0

将加载 div 置于可滚动内容的中心

是否可以在可滚动内容中将加载 svg 和文本的容器居中(屏幕中间)?内容有时不可滚动。我设法将其垂直居中,但我...

回答 1 投票 0

如何在浏览器屏幕中央对齐两个非固定宽度的div?

我想在屏幕中央对齐两个非固定宽度的 div,并且希望它们都出现在同一水平面上。我希望左侧 div 的右边缘和左侧之间没有边距

回答 1 投票 0

我需要以红色显示屏幕垂直和水平中心的免责声明文件(.TXT)

我需要在屏幕垂直和水平中心以红色显示免责声明文件(.TXT)。 $配置路径='

回答 0 投票 0

标题图像未在工具栏中居中

我正在玩 Codenameone 教程之一中的 Netflix 克隆应用程序。我注意到在模拟器中,“Netflix”图像标题没有按照预期居中......

回答 1 投票 0

Google 地图 v3 - 打开时将信息窗口居中

我有一个运行良好的 Google 地图,但我只需要调整它,以便当单击标记并打开信息窗口时,我希望该标记(和地图)位于屏幕的中心。这太...

回答 1 投票 0

用Flex垂直居中,设置高度,使用Align-items,还是不居中

我已经阅读了这些技术,但一个半小时后我无法弄清楚出了什么问题。我缺职位了吗?为什么文本不垂直居中? .subscribe-btn { 显示:柔性; ...

回答 2 投票 0

如何让 Google 地图在刷新时保持缩放和中心位置?

我有这个: 函数 initMap() { // 创建一个聚焦于 PA 的新地图对象 地图 = new google.maps.Map(document.getElementById('地图'), { 变焦:8, 中心:{ 纬度:41,经度:-78 }, }); 我

回答 1 投票 0

溢出的文字可以居中吗?

当我为宽度大于文本宽度的元素指定 text-align:center 时,文本将在元素的内容框中居中(如预期)。 当我指定文本时-

回答 9 投票 0

Flutter:如何在 CircleAvatar 上放置图标并使其居中?

我想将相机图标居中,但我做不到。我尝试使用图像而不是图标,但这仍然不起作用。我认为它不起作用,因为不可能在

回答 5 投票 0

如何将文本放置在文本视图的正中心?

我正在开发一个原生android应用程序,我遇到了一个问题,TextView中的文本没有放置在center_vertical中。 文本已放置在 center_horizental 中。问题是垂直的...

回答 1 投票 0

制作一个从左向右滚动的画廊,但滚动中的第一个元素以 margin-left auto 开头,以便其居中

我正在尝试做一个小项目并且想知道 我现在有这样的页面:https://meowrhino.github.io/profilePics/ 并希望画廊能有一个像我一样的卷轴......

回答 1 投票 0

我是一个初学者,沉迷于 VS Code 尝试使用直接格式化

VS Code 直接格式化不起作用。我被告知要使用CSS。为什么我不能通过文本编辑器使用直接格式化? 在学习如何使用 C 之前,我尝试在 VS Code 中使用直接格式化...

回答 1 投票 0

我无法将我的 div 居中并让他做出响应

我正在用 html 和 css 制作学校项目,按钮上方的所有上部部分都居中且响应式,但按钮未居中(我必须将宽度更改为 60%),而且它们不是居中

回答 1 投票 0

使用 CSS 将 HTML DIV 居中不起作用,我做错了什么?

我目前正在做一项学校作业,但遇到了无法解决的问题。 我创建了两个带有网格系统的 div,一个用于日历,一个用于新闻部分,当我

回答 2 投票 0

用网格将图像居中

我一直在努力开发一个网站,其中包含标题和正文中的图像。然而,我在尝试将图像置于身体部分的中心时遇到了挑战。图片

回答 1 投票 0

如何在页面中间放置html代码

我想学习学校项目的html代码,我不知道如何在页面中间(水平)放置字母*以使其更美观。我是编码新手,所以请尝试使其变得简单......

回答 3 投票 0

SVG 中心文本在圆圈中

我正在尝试将文本置于 SVG 圆圈中。 查看了以前的解决方案,但无法使其工作。 如何让以下示例将“X”置于圆的中心而不修改 x/y 坐标...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.