如何在移动设备上居中左对齐文本

debugcn 发表于 Dev

薇薇安

桌面版设计应该有左边的文字，然后在右边的图像或视频。我希望文本以移动设备为中心。移动版本问题但是我在尝试弄清楚为什么文本在移动设备上左对齐时遇到了麻烦。我在网上读到我应该添加一个@media（最大宽度：768px）。想知道是否有人可以帮助指定我应该添加的内容。

代码附在下面。

.content-with-image-on-right .simpleVideo .vidyard_iframe {
	width:80% !important;
/*   height: 250px !important; */
	right: 0 !important;
      height: 289px !important;
}
.content-with-image-on-right .simpleVideo {
	display: inline-block !important;
  width: 47%;
  padding:20px;
}

 .content-with-image-on-right .simpleVideo .player-wrapper {
  width: 100% !important;
  height: 80% !important;
  float: right !important;
}


.content-with-image-on-right{
			margin-top: 10px;
  		margin-bottom: 10px;
  		max-width: 1080px;
  		margin: 0 auto;
  
}
.content-with-image-on-right .headingText  h3{
	text-align: center;
  font-size:35px ;
}
.content-with-image-on-right .subHeadingText h4{
		text-align: center;
  	font-size:20px;
}

.content-with-image-on-right .content {
	    float: left;
    	width: 50%;
    	padding: 20px;
  		text-align: center;
}
.content-with-image-on-right .right-image img{
  width:45% !important;
  margin: 20px;
}
.content-with-image-on-right .right-image video{
	  width:45% !important;
    margin: 20px;

  
}
.content-with-image-on-right .rightImage{
	  float: right;
    width: 45%;
    margin: 20px;
 
}
.content-with-image-on-right .rightImage img{
		max-width: 100%;
    height: auto;
}

.content-with-image-on-right .vidyard_tmask {
  z-index: 9000 !important;
}
.content-with-image-on-right .vidyard_tbox {
	z-index: 9999 !important;
}
#vy-player #playlist_container, .player-wrapper {
  width: 80% !important;
  height: 80% !important;
}

.content-with-image-on-right .right-image video{
	border: none !important;
}


@media (max-width: 768px)  {
  .content-with-image-on-left .content{
  	width:100% !important;
    font-size:18px;
  }
  .content-with-image-on-left .leftImage{
  		width: 100% !important;
    	margin: 0 !important;
  }
  
  .content-with-image-on-right .right-image video{
  			width: 100% !important;
    		margin: 0 !important;
    		border: none !important;
  }
  
  .content-with-image-on-right .right-image img{
  	width: 100% !important;
    margin: 0 !important;
  }
.content-with-image-on-right .simpleVideo .vidyard_iframe {
    width: 56% !important;
    
}
}

<div class="content-with-image-on-right">
  	<div class= "headingText"><h3>{{widget.headingtext}}</h3></div>
  	<div class= "subHeadingText"><h4>{{widget.subheadingtext}}</h4></div>
    <div class="content">{{ widget.content_area }}</div>
    <div class="right-image" style="side-image: url({{ module.side_image_group.custom_image_module.src|cut('http:') }});">
      {% if  module.side_image_group.custom_image_module.src %}
         <img src="{{module.side_image_group.custom_image_module.src}}" width="{{ module.side_image_group.custom_image_module.custom_image_module.width }}" height="{{ module.side_image_group.custom_image_module.custom_image_module.height }}" alt="{{ module.side_image_group.custom_image_module.custom_image_module.alt }}"> 
      {% else if module.vidyard_viedo%}
      	<div class="simpleVideo">{{module.vidyard_viedo}}</div>
      {% else if module.side_image_group.webm and module.side_image_group.mp4 %}
        <video playsinline  muted  controls poster="{{ module.side_image_group.custom_image_module.src }}">
          <source src="{{ module.side_image_group.webm|cut('http:')|cut('https:') }}" type="video/webm">
          <source src="{{ module.side_image_group.mp4|cut('http:')|cut('https:') }}" type="video/mp4">
          <source src="{{ module.side_image_group.ogg|cut('http:')|cut('https:') }}" type="video/ogg">
        </video>
      
      {% endif%}

      </div>    
 </div>

乔凯信息科技

您需要添加这样的 CSS 代码：

@media (max-width: 767px) {
  .content-with-image-on-right .content,
  .content-with-image-on-right .rightImage {
    float: none;
    width: 100%;
    margin: 0;
  }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。