替代显示:flex [英] Alternative to display:flex
本文介绍了替代显示:flex的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
试图摆脱显示:flex，因为它与Internet Explorer版本不兼容.需要替代方法以行内和居中显示我的标题.我曾尝试使用内联块和块，但没有任何运气.
Trying to get rid of display: flex because its not compatible with internet explorer versions. Need an alternative to display my header inline and centered. I've tried to use inline-block and block, but wasn't getting any luck.
css:
html, body {
position: relative;
margin: 0;
padding: 0;
background-image: url("backround.jpg");
background-repeat: repeat-y;
}
/*Nav Menu/Home Page*/
.index-header {
display: flex;
position: fixed;
justify-content: center;
align-items: center;
width: 100%;
background-image: url("header.jpg");
background-position: center;
z-index: 1;
text-transform: uppercase;
border-bottom: 5px solid #ff8000;
border-top: 5px solid #ff8000;
text-shadow: 2px 2px #000;
}
header h2 {
font-family: Georgia;
font-size: 1.6em;
color: #fff;
text-shadow: 3px 3px #000;
}
nav {
padding: 1%;
overflow: hidden;
}
nav a {
float: left;
display: block;
color: #ff8000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size 17px;
font-family: helvetica;
letter-spacing: 2px;
}
nav li, nav ul{
list-style: none;
}
nav a:hover {
background-color: #fff;
color: #ff8000;
}
nav .material-icons {
padding-bottom: 5px;
display: none;
font-size: 36px;
color: #ff8000;
}
@media screen and (max-width: 600px) {
nav a:not(:first-child) {display: none;}
nav .material-icons {
float: left;
display: block;
}
}
html:
<!DOCTYPE html>
<html lang="en-us">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="styles/normalize.css">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet/less" type="text/css" href="styles/style.less" />
<script src="less.js" type="text/javascript"></script>
<title> Knox Enterprises Inc.</title>
</head>
<body>
<header class="index-header">
<nav>
<i class="material-icons">menu</i>
<a href="index.html">Home</a>
<a href="About.html">About</a>
<a href="Contact.html">Contact</a>
</nav>
<h2>Knox Enterprises Inc.</h2>
</header>
推荐答案
我对标记进行了一些浮动和位置更改，以使您入门.您可能需要修改以获得所需的对齐方式
I used some float and position changes to your markup to get you started. you may need to modify to get the alignment you wanted
html, body {
position: relative;
margin: 0;
padding: 0;
background-image: url("backround.jpg");
background-repeat: repeat-y;
}
/*Nav Menu/Home Page*/
.index-header {
/* display: flex;*/
position: fixed;
justify-content: center;
align-items: center;
width: 100%;
background-image: url("header.jpg");
background-position: center;
z-index: 1;
text-transform: uppercase;
border-bottom: 5px solid #ff8000;
border-top: 5px solid #ff8000;
text-shadow: 2px 2px #000;
}
header h2 {
font-family: Georgia;
font-size: 1.6em;
color: #fff;
text-shadow: 3px 3px #000;
top: 12px;
position: relative;
}
nav {
padding: 1%;
overflow: hidden;
float:left;
}
nav a {
float: left;
display: block;
color: #ff8000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size 17px;
font-family: helvetica;
letter-spacing: 2px;
}
nav li, nav ul{
list-style: none;
}
nav a:hover {
background-color: #fff;
color: #ff8000;
}
nav .material-icons {
padding-bottom: 5px;
display: none;
font-size: 36px;
color: #ff8000;
}
nav i,nav a ,.index-header h2{
display:inline;
}
@media screen and (max-width: 600px) {
nav a:not(:first-child) {display: none;}
nav .material-icons {
float: left;
display: block;
}
header h2 {
}
} <html lang="en-us">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="styles/normalize.css">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet/less" type="text/css" href="styles/style.less" />
<script src="less.js" type="text/javascript"></script>
<title> Knox Enterprises Inc.</title>
</head>
<body>
<header class="index-header">
<nav>
<i class="material-icons">menu</i>
<a href="index.html">Home</a>
<a href="About.html">About</a>
<a href="Contact.html">Contact</a>
</nav>
<h2>Knox Enterprises Inc.</h2>
</header>这篇关于替代显示:flex的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
