How to make the a tag and the span tag stand in the center of each in the mobile version.

<div class="container"> <div class="col-md-4"> <div class="row"> <div class="logo"> <a href="http://adelfi.kz/"> <img alt="Brand" src="img/logo_new-300x212.png"> </a> <span>АДЕЛЬФИ<br><p>LUXURY FURNITURE</p></span> </div> </div> </div> </div>

css

 @media only screen and (max-width : 768px) { .top_text p{ text-align: center; }

}

enter image description here

  • and what, from 4 answers any did not approach? - Max Mikheyenko 3:53

4 answers 4

What would become the center, you can make it blocky and align

 a{ display:block; margin:0 auto; }
  • It does not work like that. I divide the block into three sub blocks, maybe this is the reason? - Nursultan Kenzhegaliyev
  • If you put the link type: block, it will be a block, and will be centered with a margin: 0 autp; - user190134

Most likely you need to align the image in the center?))
1. for a tag - display: block; text-align: center; width: 100%;
2. for INVESTED img - display: block; margin: 0 auto;
3. for the span tag - display: block; text-align: center; width: 100%;
Well, then you have a mess, because the p tag inside the span is non-semantic
In addition, you probably still apply some additional rules, especially for the p tag, judging by the figure, there are indents.

    Apply the following styles:

     <style>@media only screen and (max-width : 768px) { .logo a{ text-align: center } .logo img{ display:none } } </style>

    and the following HTML code:

     <div class="logo"> <a href="http://adelfi.kz/"><img src="img/logo_new-300x212.png" alt="Brand" /><p><span>АДЕЛЬФИ LUXURY FURNITURE</span></p></a> </div>

    Specifying the p element inside a span causes a validation error. And the role of the span is not clear from the proposed code. If this element is not important, then it is better to eliminate its code.

       .logo { text-align: center; }

      Also, inside the <span> you can not insert a block element <p>