Question

我想在屏幕中间对齐文字。我在div元素中有内容和按钮，我希望在屏幕中间显示。

目前，文字显示在div元素下方。

我有三个横幅和3个内容。

我想在垂直和水平方向对齐中间的文字。

＆＃13;

jQuery(document).ready(function() {
	var headerheight = jQuery("#header-wrapper").height();
	jQuery(".view-home-banner .views-row-1 .panell img").css("margin-top",headerheight+"px");
	jQuery(".banner_img img").addClass("img-responsive");
});

＆＃13;

#navigation
{
	display:none;
}
.feed-icon
{
	display:none;
}
/*banner*/
#home_banner .home-banner {
	position: relative;
	width: 100%;
     color:black;
}
.banner_description p { font-weight: bold;word-spacing:5px;margin:1%}
.banner_link {
	font-size: 28pt
     
	text-align: center;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	}
.banner_description {
	
	font-size: 33pt;
	font-weight: bold;
    color: black;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    	text-align:center;
	
}
.banner_link a { 
	color: white;
    text-transform: uppercase;
	font-weight: normal;
	background-position:1%;
	padding:0.5% 1.5%;
	background-color:#5d145f;
	font-size:17pt;
	opacity:0.8;
}
.background-image-formatter {
	background-repeat: no-repeat;
	background-size: cover;
background-position: center;
	min-height: 100vh;
}
.home-banner-background
{
	position:absolute;
	width:100%;
	height:auto;
	border-radius:2%;
	opacity:0.9;
}
/*.banner_img > img{
    /*float: right;
    max-width: 100%;
    height: auto;
min-height: 100vh;
}
.banner_img > img {
    max-height: 1024px;
    min-width: 1024px;
}
*/

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="views-row views-row-1 views-row-odd views-row-first classtest">
    <section class="panell" style="height: 543px;">
        <span class="field-content banner_img"><div class="background-image-formatter" style="background-image: url('data:image/jpeg;base64,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')">
  &nbsp;
</div>
</span>		<div class="home-banner-background">
        <div class="field-content banner_description"><p>We built great software products</p>
</div> 	   <div class="field-content banner_link"><a href="#">Explore</a></div>	   </div>
	     </section>
	   
 </div>

＆＃13;

Answer 1

如果你想在屏幕中间对齐一个div，你可以为div的CSS设置margin : 0, auto;和width:50%;。这是一个着名的CSS技巧。顺便问一下，你的问题是令人困惑，请将您的问题内容减少到最低限度。

修改：根据留下的评论，您尝试水平和垂直对齐。您可以执行以下操作：

div {

     transform: translateX(-50%) translateY(-50%);
     top: 50%;
     left: 50%;
     position: absolute;
}

这将动态地对齐你的元素。来自Mozilla Developers：

translatex()
The translateX() CSS function moves the element horizontally on the plane. This transformation is characterized by a <length> defining how much it moves horizontally.
translateX(tx) is a shortcut for translate(tx, 0).
translatey()
The translateY() CSS function moves the element vertically on the plane. This transformation is characterized by a <length> defining how much it moves vertically.
translateY(ty) is a shortcut for translate(0, ty).

详细了解转换函数here.

Answer 2

如果您想横向设置文本中心，那么您可以使用text-align:center，以防您想要垂直地执行此操作，您可以使用line-height属性。您已将height:543px分配给部分，因此您需要编写

line-height:543px ;

这里更新了小提琴https://jsfiddle.net/1mh33zz7/

Answer 3

＆＃13;

// Mark the method as async
protected override async void OnCreate(Bundle bundle)
{
    base.OnCreate(bundle);

    SetContentView(Resource.Layout.LoginWebview);

    // remove the .Wait() and await the method call
    await MainAsync(email, password, apiBaseUri, loginToken);
}

＆＃13;

或

＆＃13;

div {
     position: absolute;
     transform: translateX(-50%) translateY(-50%);
     top: 50%;
     left: 50%;
}

＆＃13;

如何在屏幕中间对齐文字

3 个答案: