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

Question

Desktop Version该设计应该在左侧有文本，然后在右侧有图像或视频。我希望文本在移动设备上居中。 Mobile version issue但我无法弄清楚为什么文本在移动设备上保持对齐。我在网上看到我应该添加一个@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>

Answer 1

您需要像这样添加 CSS 代码:

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