我正在尝试将div x像素位置放在页面中心的右侧.因此,div将相对于中心.
到目前为止,我尝试过像傻瓜一样的东西
margin:0 auto;
margin-left:20px;
Run Code Online (Sandbox Code Playgroud)
但是你不需要在浏览器中测试它就知道它不起作用.
在此先感谢您的帮助.
我的flex容器:
.back_pattern {
display: flex;
display: -ms-flexbox;
-ms-flex-pack: center;
flex-direction: column;
align-content: center;
justify-content: center;
min-height: 100vh;
width: 100%;
}
Run Code Online (Sandbox Code Playgroud)
在其他浏览器上一切正常.
ie11:http://take.ms/68dHo ;
chrome:http://take.ms/JhcEH有
什么问题?
CSS语法模块级别3规范即将到来的草案中似乎存在破坏(即向后不兼容)的更改:现在可能需要在块中的最后一个声明之后使用尾随分号.
比较旧的措辞(W3C 2003年8月13日工作草案):
4.8.规则集,声明块和选择器
声明块(在下文中也称为{} -block)以左大括号({)开头,以匹配的右大括号(})结束.在它们之间必须有一个零或多个以分号分隔(;)声明的列表.
与新的(编辑草案2012年6月14日):
2. CSS语法的描述
规则以选择器(由Selectors规范定义)开始,然后有一个包含一系列声明的{}包装块.选择器指定声明将应用于哪些元素.每个声明都有一个属性名称,后跟冒号和属性值,并以分号结束.
(强调我的).
所以那些漂亮的短形式,例如:
em { color: lime }
Run Code Online (Sandbox Code Playgroud)
(目前在CSS Color Module Level 3建议中作为有效示例提供)将不再验证?
如果有人对整个3级草稿收藏有更多了解,请验证吗?对于面向未来的样式表,我们真的必须在规范最终确定之前彻底检查现有的CSS文件(如果缺少则插入分号)或者我是否误解了某些内容?
可能重复:
如何在DIV中居DIV?
我想集中一个<div>(我是HTML5的新手而且<center>标签已不复存在),并且无论如何都要避免使用表格.<div>到目前为止,这是我作为CSS的问题:
#roundedcorner {
-moz-border-radius: 15px;
border-radius: 15px;
background-image: url(file:///Macintosh%20HD/Users/julesmazur/Desktop/TAN3.0/Photos/bodydivbg.png);
width: 960px;
left: 50%;
font-family: Ubuntu;
}
Run Code Online (Sandbox Code Playgroud)
(对于任何好奇的人,Ubuntu都是Google Web Fonts提供的).
为什么我的屏幕截图图像不在屏幕中央?
到目前为止,我的 css 是这样的:
<section class="hero container max-w-screen-lg mx-auto text-center pb-10">
<div class="">
<img src="/images/screenshot.png" alt="screenshot" width="887" height="550" />
</div>
</section>
Run Code Online (Sandbox Code Playgroud)
当我在 chrome 中检查图像时,我可以看到图像右侧有一些区域不是图像的一部分,而是占用了空间。
这是一个屏幕截图,您可以在其中看到图像右侧的这个不可见填充。
知道发生了什么,因为我想了解我什至无法将简单图像居中。
作为奖励,如果有人可以使用容器解决这个问题,您能否也向我展示使用 flex 的替代方法?我也尝试过“flex items-center”,但对我也不起作用。
我想知道的是,<div>无论屏幕分辨率和窗口大小分辨率如何,如何在屏幕的一半和高度100%.
谢谢你们的回复他们都帮助了我!对不起,如果这个问题有点令人困惑,我之前没有真正做过任何CSS,所以我不知道怎么说真的...再次谢谢你!
我一直试图在这个页面链接上集中几个iframe .但是,我看到的每个例子我都尝试过但不起作用.您可以清楚地看到不居中的视差浮动div,在底部,html页面的iframe向右浮动而不是居中.
任何帮助将非常感激.
我正在通过"NerdDinner"教程尝试ASP.NET MVC 2.但显然MVC的第2版并没有像教程中那样创建一个Details页面,并且你可以在它们上面使用带有css类的div来设置样式.但是,我想得到每个标签跟在字段的同一行上的样式,我不能这样做,我把它们放在彼此的顶部,或者如果我尝试使用浮动奇怪的事情发生(可能是因为在这种情况下,我不确切知道如何使用它,其中每个其他div应该在同一行上).这是为Details页面生成的html:
<fieldset>
<legend>Fields</legend>
<div>
<div class="display-label">DinnerID</div>
<div class="display-field"><%: Model.DinnerID %></div>
<div class="display-label">Title</div>
<div class="display-field"><%: Model.Title %></div>
<div class="display-label">EventDate</div>
<div class="display-field"><%: String.Format("{0:g}", Model.EventDate) %></div>
<div class="display-label">Description</div>
<div class="display-field"><%: Model.Description %></div>
<div class="display-label">HostedBy</div>
<div class="display-field"><%: Model.HostedBy %></div>
<div class="display-label">ContactPhone</div>
<div class="display-field"><%: Model.ContactPhone %></div>
<div class="display-label">Address</div>
<div class="display-field"><%: Model.Address %></div>
<div class="display-label">Country</div>
<div class="display-field"><%: Model.Country %></div>
<div class="display-label">Latitude</div>
<div class="display-field"><%: String.Format("{0:F}", Model.Latitude) %></div>
<div class="display-label">Longitude</div>
<div class="display-field"><%: String.Format("{0:F}", Model.Longitude) %></div>
<div class="display-label">IsValid</div>
<div class="display-field"><%: Model.IsValid %></div>
</div>
</fieldset>
Run Code Online (Sandbox Code Playgroud)
如何让每个"条目"的显示标签和显示字段显示在同一行?
我试图制作一个独立于浏览器的代码,里面有一个搜索栏(这个搜索栏是我从demos.jQuery.com上获得的)但是现在当我试图修复左边和右边的边距百分比时(我想要它的中心)甚至当浏览器宽度改变时对齐)我无法做到这一点,我是CSS新手可以有人帮忙吗?
我到现在为止的代码是:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Screen1</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="screen1.css">
</head>
<body>
<div id="header"><p class="p1"><b>Composite<img class="img1" src="https://cdn2.iconfinder.com/data/icons/picol-vector/32/arrow_sans_down-128.png" alt="alternate"></b></p></div>
<div id=""main>
<div data-role="main" id="main" class="ui-content">
<form>
<input data-type="search" id="divOfPs-input">
</form>
<div class="elements" data-filter="true" data-input="#divOfPs-input">
<p><strong>These</strong> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
<p><strong>p elements</strong> nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
<p><strong>are</strong> et ea rebum. Stet clita kasd …Run Code Online (Sandbox Code Playgroud) 我有div一次我点击了一些行动,在该网站的另一个元素出现。它是固定div出现在所有div上方的固定元素,背景变暗。我需要确保此div已定位到中心,即使窗口已调整大小,它也将保持在中心。
我已经试过了left,margin-left:50%把戏,但它没有做的工作。
这是我的代码:
<div class="overlay-box">Some content</div>
Run Code Online (Sandbox Code Playgroud)
的CSS
.overlay-box {
background-color:#fff;
width:550px;
left:50%;
margin-left:-275px;
position:fixed;
text-align:center;
border:1px solid #000;
}
Run Code Online (Sandbox Code Playgroud)
它不会定位在中心位置,并且在调整大小时,它的左边缘比右边缘更大。我该如何解决?有像margin:0px auto固定div 一样的魔术吗?
css ×10
html ×6
alignment ×1
asp.net-mvc ×1
center ×1
centering ×1
css-position ×1
flexbox ×1
iframe ×1
javascript ×1
jquery ×1
tailwind-css ×1