- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
它们向左对齐,显然我不够聪明,无法解决这个问题。通常,我将如何更改其对齐方式?例如,居中?
此外,如果我想在屏幕小于 950 像素的情况下扩展每个元素的大小,我会在 CSS 的相关媒体查询部分下将其作为条件格式来执行,对吧?
$(document).ready(function() {
$(document).bind("contextmenu", function(e) {
if (e.target.nodeName == 'IMG') {
//context menu attempt on top of an image element
return false;
}
});
//dropdown nav
$("#nav").addClass("js");
$("#nav").addClass("js").before('<div id="menu">☰</div>');
$("#menu").click(function() {
$("#nav").toggle();
});
$(window).resize(function() {
if (window.innerWidth > 950) {
$("#nav").removeAttr("style");
}
});
});
html,
body {
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 12px;
color: #c5e8ea;
background-color: #000000;
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased !important;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}
.hidden {
display: none;
}
p {
text-align: justify;
}
#header {
position: fixed;
margin: 0;
padding: 4px;
float: left;
margin-top: 0px;
z-index: 1;
}
#navmain {
position: fixed;
top: 0px;
width: 100%;
height: 75px;
margin-top: 0px;
font-family: 'Cedarville Cursive', cursive;
font-size: 25px;
color: #E5E5E5;
background-color: #000000;
box-shadow: ;
padding: 0px;
z-index: 1;
opacity: .8;
}
h1 {
margin: 0;
margin-left: 15px;
margin-top: 0px;
padding: 0;
float: left;
opacity: ;
color: #E5E5E5;
text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
ul.navmain {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
float: right;
}
li.navmain {
float: left;
}
a.navmain:link,
a.navmain:visited {
display: block;
height: 75px;
width: 110px;
font-family: 'Old Standard TT', serif;
font-size: 23px;
color: #E5E5E5;
background-color: #000000;
text-align: center;
line-height: 95px;
padding: 0px;
text-decoration: none;
text-transform: lowercase;
}
a.navmain:hover,
a.navmain:active {
background-color: #181818;
}
.active {
background-color: #0b0b0a;
}
#content1 {
position: absolute;
width: 100%;
height: 100%;
background-color: #000000;
background-image: url("../img/bg.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
-webkit-animation: fadein 6s;
/* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 6s;
/* Firefox < 16 */
-ms-animation: fadein 6s;
/* Internet Explorer */
-o-animation: fadein 6s;
/* Opera < 12.1 */
animation: fadein 6s;
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Internet Explorer */
@-ms-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#content2 {
position: absolute;
width: 60%;
height: 100%;
background-color: #000000;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#content2 h1 {
margin-top: 95px;
padding: 10px;
font-size: 40px;
font-family: 'Source Sans Pro', sans-serif;
}
#content2 p {
margin-top: 10px;
margin-left: 45px;
margin-right: 45px;
font-size: 16px;
font-family: 'Source Sans Pro', sans-serif;
float: left;
}
#content3 {
float: right;
width: 40%;
height: 100%;
}
#content3 img {}
#footer {
clear: both;
height: 15px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 12px;
color: #E5E5E5;
border-top: 1 px solid #efefef;
padding: 8px 10px;
line-height: 15px;
background-color: #0b0b0a;
}
#footer a {
color: #E5E5E5;
text-decoration: none;
}
#footer a:hover {
Color: #db6d16
}
#footer #altnav {
width: 350px;
float: right;
text-align: right;
}
/* dropdown nav */
@media screen and (max-width: 950px) {
#menu {
width: 1.4em;
display: block;
background: ;
font-size: 1.35em;
text-align: center;
float: right;
}
#nav.js {
display: none;
}
ul {
width: 100%;
overflow: hidden;
background-color: #000000;
}
li {
width: 100%;
border-right: none;
}
#content2 {
position: absolute;
width: 100%;
height: 100%;
background-color: #000000;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#content2 h1 {
margin-top: 95px;
padding: 10px;
font-size: 40px;
font-family: 'Source Sans Pro', sans-serif;
}
}
@media screen and (min-width: 950px) {
#menu {
display: none;
}
}
/* dropdown nav */
<style>
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:700');
</style>
<style>
@import url('https://fonts.googleapis.com/css?family=Cedarville+Cursive');
</style>
<style>
@import url('https://fonts.googleapis.com/css?family=Old+Standard+TT:400i');
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="navmain">
<div id="header">
<a href="#">
<h1>Some Dude</h1>
</a>
</div>
<ul class="navmain" id="nav">
<li class="navmain"><a class="navmain" href="#">fauna</a></li>
<li class="navmain"><a class="navmain" href="#">flora</a></li>
<li class="navmain"><a class="navmain" href="#">scenic</a></li>
<li class="navmain"><a class="navmain" href="#">urban</a></li>
<li class="navmain"><a class="navmain" href="#">about</a></li>
<li class="navmain"><a class="navmain" href="#">contact</a></li>
</ul>
</div>
<div id="content1">
</div>
最佳答案
设置边距。
a.navmain:link, a.navmain:visited {
margin: 0 auto;
}
新代码片段:
html, body{
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 12px;
color: #c5e8ea;
background-color:#000000;
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased !important;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}
.hidden {
display: none;
}
p {
text-align: justify;
}
#header {
position:fixed;
margin: 0;
padding: 4px;
float: left;
margin-top: 0px;
z-index:1;
}
#navmain {
position: fixed;
top: 0px;
width: 100%;
height:75px;
margin-top: 0px;
font-family: 'Cedarville Cursive', cursive;
font-size:25px;
color:#E5E5E5;
background-color: #000000;
box-shadow: ;
padding: 0px;
z-index:1;
opacity:.8;
}
h1 {
margin:0;
margin-left:15px;
margin-top:0px;
padding: 0;
float: left;
opacity:;
color:#E5E5E5;
text-shadow:
3px 3px 0 #000,
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
ul.navmain {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
float:right;
}
li.navmain {
float:left;
}
a.navmain:link,a.navmain:visited {
margin: 0 auto;
display:block;
height:75px;
width:110px;
font-family: 'Old Standard TT', serif;
font-size: 23px;
color:#E5E5E5;
background-color:#000000;
text-align:center;
line-height:95px;
padding:0px;
text-decoration:none;
text-transform:lowercase;
}
a.navmain:hover,a.navmain:active {
background-color:#181818;
}
.active {
background-color: #0b0b0a;
}
#content1 {
position: absolute;
width: 100%;
height: 100%;
background-color: #000000;
background-image: url("../img/bg.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
-webkit-animation: fadein 6s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 6s; /* Firefox < 16 */
-ms-animation: fadein 6s; /* Internet Explorer */
-o-animation: fadein 6s; /* Opera < 12.1 */
animation: fadein 6s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
#content2 {
position:absolute;
width: 60%;
height: 100%;
background-color: #000000;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#content2 h1 {
margin-top:95px;
padding:10px;
font-size: 40px;
font-family: 'Source Sans Pro', sans-serif;
}
#content2 p {
margin-top:10px;
margin-left:45px;
margin-right:45px;
font-size: 16px;
font-family: 'Source Sans Pro', sans-serif;
float:left;
}
#content3 {
float:right;
width:40%;
height:100%;
}
#content3 img {
}
#footer {
clear: both;
height: 15px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 12px;
color: #E5E5E5;
border-top: 1 px solid #efefef;
padding: 8px 10px;
line-height: 15px;
background-color:#0b0b0a;
}
#footer a {
color: #E5E5E5;
text-decoration: none;
}
#footer a:hover {
Color: #db6d16
}
#footer #altnav {
width: 350px;
float: right;
text-align: right;
}
/* dropdown nav */
@media screen and (max-width: 950px) {
#menu {
width:1.4em;
display: block;
background:;
font-size:1.35em;
text-align: center;
float:right;
}
#nav.js {
display: none;
}
ul {
width:100%;
overflow: hidden;
background-color:#000000;
}
li {
width:100%;
border-right:none;
}
#content2 {
position:absolute;
width: 100%;
height: 100%;
background-color: #000000;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#content2 h1 {
margin-top:95px;
padding:10px;
font-size: 40px;
font-family: 'Source Sans Pro', sans-serif;
}
}
@media screen and (min-width: 950px) {
#menu {
display: none;
}
}
/* dropdown nav */
<!DOCTYPE html>
<html>
<head>
<title>| Home</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
<style>@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:700');</style>
<style>@import url('https://fonts.googleapis.com/css?family=Cedarville+Cursive');</style>
<style>@import url('https://fonts.googleapis.com/css?family=Old+Standard+TT:400i');</style>
<style type="text/css" media="all">@import "css/master.css";</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).bind("contextmenu",function(e){
if(e.target.nodeName == 'IMG'){
//context menu attempt on top of an image element
return false;
}
});
//dropdown nav
$("#nav").addClass("js");
$("#nav").addClass("js").before('<div id="menu">☰</div>');
$("#menu").click(function(){
$("#nav").toggle();
});
$(window).resize(function(){
if(window.innerWidth > 950) {
$("#nav").removeAttr("style");
}
});
});
</script>
</head>
<body>
<div id="navmain">
<div id="header">
<a href="#"><h1>Some Dude</h1></a>
</div>
<ul class="navmain" id="nav">
<li class="navmain"><a class="navmain" href="#">fauna</a></li>
<li class="navmain"><a class="navmain" href="#">flora</a></li>
<li class="navmain"><a class="navmain" href="#">scenic</a></li>
<li class="navmain"><a class="navmain" href="#">urban</a></li>
<li class="navmain"><a class="navmain" href="#">about</a></li>
<li class="navmain"><a class="navmain" href="#">contact</a></li>
</ul>
</div>
<div id="content1">
</div>
</body>
</html>
关于javascript - 如何将移动菜单的内容居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42776585/
我正在尝试将 Bootstrap 输入字段置于列 div 的中心,但我尝试过的所有方法似乎都不起作用。 到目前为止我尝试了什么: Enter the inf
这是它的样子: http://i.imgur.com/H0Oqz4Q.png 这是 CSS: #header{ background:url('header.png'); border-radius:
似乎有一个 align 属性工作得非常好,但是可以对齐元素,因此面板上的所有元素都将对齐,以在彼此底部居中,如果它们都小于容器尺寸?类似顶部中心中心的东西。 类似这样的事情: 或者至少水平方向和垂直方
我用 GUI 创建了一个简单的猜谜游戏。问题是,每当我最大化窗口时,整个 GUI 都会卡在顶部中间。我想知道如何将其居中以及如何使其变大。代码如下: import javax.swing.*;
目前我在另一个 View 中有一个 View (它是一个广告),但是因为我使用的是 MATCH_PARENT,所以宽度是整个屏幕的长度,而我只希望它是广告尺寸。现在 WRAP_CONTENT 解决了这
我有一个 UIViewController 子类,它实例化了一个 UIView 子类(我们称之为 viewA)。然后,viewA 有时会实例化另一个 UIView,我们称之为 viewB。 我希望 v
我是 Cocca 和 IOS 开发的新手,发现自己处于以下情况。 我有一张 1024x1024 的背景图片,我想在所有 View 中显示它。我已将以下代码放在应用程序委托(delegate)中的应用程
我正在尝试使用 MathML 作为 HTML5 的一部分来制作居中的盒装数学方程式。问题是盒子。如果我在我的 div 元素上放置一个边框,边框足够高,但它一直延伸到屏幕的左侧和右侧。如果我在我的数学元
我知道这听起来很简单,但它不适合我。我做错了什么? .popuphdr { background-color:#00477f; height:30px; width
我正在为我的网店创建一个新网站 - 我遇到了这个 css 问题...... 系统是在prestashop平台上制作的,但是这是基本的CSS,所以没关系。 在 CMS 页面上,我在将页面居中时遇到问题,
我有一个横跨整个屏幕宽度的按钮: accusantium quia sunt 44% 我希望第一个段落标签中的文本居中,其背景图像紧挨着文本。问题是第一个 居中
http://makememodern.com/portfolio/ 您会看到我在页面上嵌入了一个网站,并且它与页面右侧对齐。我希望它居中。 最佳答案 您将 iframe 的宽度设置为 1100
我的 header 中有一个元素正在从 js 文件中获取数据。 我试图将该元素置于我的页面的中心,但我所做的一切似乎都有效。 我尝试了 margin-left: auto 和 margin-right
这个问题在这里已经有了答案: What does auto do in margin: 0 auto? (8 个答案) 关闭 7 年前。
我试图让这两个按钮并排对齐,在页面的中心垂直和水平。 几个小时以来,我一直在摆弄它,尝试了所有方法,但我无法让它既与页面居中对齐又并排对齐 我希望有人能给我指出正确的方向。谢谢..
我需要将一个 img 居中(带有 class=“key”的那个,但是 float 元素阻止了它。我应该使用什么技术将其居中? 谢谢! GitHub 存储库:https://github.com/Cal
每次我嵌入来自 Google map 的 iframe 时,它都会将标记保留在中间。 即使有工具提示并且只是剪切工具提示数据,它也会这样做: http://jsfiddle.net/V2SVa/
我无法将这些按钮置于页面中央。我只知道我错过了一些愚蠢的东西,但我不知道是什么。这是页面: All Time Last 2 Weeks La
我如何将 div 内的表格 div 对齐到 align=center 最佳答案 asd 关于html - div对齐=居中,我们在Stack Overflow上找到一个类似的问题: htt
有人知道如何在调整浏览器窗口大小时也实现垂直居中吗? 水平效果很好,图像大小调整也很好。我希望图片和链接始终在浏览器中间居中。 另外,为什么 ul 没有像图像那样居中而是向右移动了一点? Here i
我是一名优秀的程序员,十分优秀!