问如何应用CSS使标记中的DDA.AC字符位于屏幕中央
EN

Stack Overflow用户

提问于 2019-05-18 13:11:17

回答 1查看 41关注 0票数 0

当网页变小时，我想把DDA.AC文本放在中间。

text-align: center; for any tag it does not change.

https://jsfiddle.net/4oz0yuf7/

html

css

回答 1

Stack Overflow用户

发布于 2019-05-18 14:44:20

当浏览器屏幕宽度较小时，可以使用@media (max-width: 768px)设置css。这也是你的汉堡菜单出现时的宽度。

您还需要将.container的宽度扩展到全宽，并关闭.navbar-brand的float。当屏幕大于768px时，所有这些设置将不适用，并将恢复为您的默认设置。

您可以尝试将此代码添加到css中：

 @media (max-width: 768px) {

.container {
        width:100%;
    }

    a.navbar-brand {
        display:block;
        float:none;
    }
}

.navbar-toggle{
    float: left;
    right: 40px;
}
.navbar-default .navbar-brand{
    color: #f7ca02;
    font-weight: 700;
    font-size: 20px;
    opacity: 1;
}
.navbar-default .navbar-brand:hover{
    color: #f7ca02;
    opacity: 1;
}
.navbar-brand{
    text-align: center;
    vertical-align: middle;
}
.navbar-nav>li>a{
    padding-left: 25px;
    transition: ease 0.5s;
}
.navbar-nav>li>a:hover {
    opacity: 1;
}
.navbar-header{
    align-items: center;
}
.navbar-default {
    background-color: white;
    border-top:2px solid #f7960e;
    border-bottom-color: #77787a;
}
.navbar-fixed-top{
    padding-top: 5px;
    padding-bottom: 5px;
}
a{
    opacity: 0.5;
}
#card{
    color: #ef4721;
}
#login{
    left: 55px;
}
.container{
    margin-left: 19px;
    display: inline-block;
    text-align: center;
}
.jumbotron{

    background-image: url('https://lh3.googleusercontent.com/JXo_Zcavc5c4RIULtbyHrV7fShbnNr1-o0jsafXcOgwK_XApi-310FFg9IelshlQExI=w720-h310-rw');
    background-size: cover;
}

@media (max-width: 768px) {

.container {
        width:100%;
    }

    a.navbar-brand {
        display:block;
        float:none;
    }
}

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
	<link rel="stylesheet" type="text/css" href="ddaac.css">
	<title>DDA.AC</title>
</head>
<body>
	<nav class="navbar navbar-default navbar-fixed-top">
	<div class="container">
		<div class="container-fluid">
		    <!-- Brand and toggle get grouped for better mobile display -->
		    <div class="navbar-header">
		      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
		        <span class="sr-only">Toggle navigation</span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		      </button>
		      <a class="navbar-brand" href="#">DDA.AC</a>
		    </div>

		    <!-- Collect the nav links, forms, and other content for toggling -->
		    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		      <ul class="nav navbar-nav">
		        <li><a href="#">컨텐츠</a></li>
		        <li><a href="#">덱리스트</a></li>
		        <li><a id="card" href="#">카드평가</a></li>
		        <li><a href="#">트위터</a></li>
		        <li><a href="#">게시판</a></li>   
		      </ul>
		     
		      <ul class="nav navbar-nav navbar-right">
		        <li><a id="login" href="#">로그인</a></li>      
		      </ul>
		    </div><!-- /.navbar-collapse -->
		  </div><!-- /.container-fluid -->	
	</div>
	</nav>

	<div class="jumbotron">
		
	</div>


	<script src="https://code.jquery.com/jquery-1.12.4.min.js" ></script>	
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" ></script>
</body>
</html>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56196151

复制

相似问题

问如何应用CSS使标记中的DDA.AC字符位于屏幕中央
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何应用CSS使标记中的DDA.AC字符位于屏幕中央EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何应用CSS使标记中的DDA.AC字符位于屏幕中央
EN