Question

我想在@media中集中几个div类。尝试以下情况，使用和不使用margin-left。一个是动画，当移动或调整时，其表现似乎很奇怪。

Css：

 @media(min-width: 768px) {.wpcf7-form-control.wpcf7-submit {margin: 
 auto !important; margin-left:50% !important;}}

 @media (max-width: 5000px) and (min-width: 768px) 
{.contact::before, 
.contact::after {margin: auto !important; margin-left: 50% 
!important;}} 

@media (max-width: 5000px) and (min-width: 768px) {.wpcf7 
{margin:auto! important; margin-left :50% !important;}}

@media (max-width: 5000px) and (min-width: 768px) 
{#anr_captcha_field_1 {margin: auto !important; margin-left: 50% 
!important;

}}

我一直认为margin: auto可以工作，但即使使用important也不可行

https://adsler.co.uk/contact-us/

></p>
<p><label> Subject<br />
<span class="wpcf7-form-control- 
wrap your-subject"><input  
type="text" name="your-subject" 
value="" size="40" class="wpcf7- 
form-control wpcf7-text" aria- 
invalid="false" /></span> </label>. 
 </p>
<p><label> Your Message<br />
<span class="wpcf7-form-control- 
wrap your-message"><textarea 
name="your-message" cols="40" 
rows="10" 
class="wpcf7-form-control wpcf7- 
textarea" aria-invalid="false">. 
</textarea></span> </label></p>
<p><div class="anr_captcha_field">. 
<div 
id="anr_captcha_field_1" 
class="anr_captcha_field_div">. 
</div></div><span class="wpcf7- 
form-control-wrap g-recaptcha- 
response"></span></p>
<p><input type="submit" 
value="Send" class="wpcf7-form- 
control wpcf7-submit" /></p>
<div class="wpcf7-response-output 
wpcf7-display-none"></div></form>. 
</div>
</div><!-- .entry-content -->

Answer 1

您可以使用flexbox将div的内容居中。试试这个：

.myClass {
  display: flex;
  justify-content: center;
}

此外，删除该保证金道具。

说明：margin属性无效，因为div的宽度可能是设备宽度的100％。因此，您需要处理内容。 Flexbox是一个很好的工具。
我留下了有用的链接，以详细了解flexbox和box-model，这是此问题的核心概念。

如何在@media和跨浏览器中将div类水平居中？

1 个答案: