简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
css - Problème de mise en page Flex
曾经蜡笔没有小新
曾经蜡笔没有小新 2017-05-19 10:47:50
0
4
977


L'en-tête utilise une disposition flexible. Je souhaite que le champ de recherche soit centré horizontalement, similaire à la disposition dans IOS natif.

Il n'est pas affecté par le contenu sur les côtés gauche et droit, il est toujours centré horizontalement

Je me souviens de l'avoir déjà implémenté, mais je l'ai ensuite oublié lorsque j'ai utilisé flex.css. Veuillez voir comment y parvenir en utilisant ceci.

曾经蜡笔没有小新
曾经蜡笔没有小新

répondre à tous (4)
仅有的幸福
仅有的幸福2017-05-19 10:49:50 4 plancher 
.header{ display:flex; flex-flow:row nowrap; align-item:center; justify-content:space-around; }

详细了解Flex布局见：http://www.ruanyifeng.com/blo...

Comme+0
Ajouter une réponse
    阿神
    阿神2017-05-19 10:49:50 3 plancher

    只有三个元素可以直接用 space-between 撑开

    https://jsfiddle.net/straybug...

    你后来更新的

    不受左右两边内容的影响，依然水平居中

    既然不受影响那么只能是 absolute 抽离出来再居中了。

    https://jsfiddle.net/straybug...

    Comme+0
    Ajouter une réponse
      伊谢尔伦
      伊谢尔伦2017-05-19 10:49:50 2 plancher

      主要用到align-items: center即可
      这是demo

      Comme+0
      Ajouter une réponse
        我想大声告诉你
        我想大声告诉你2017-05-19 10:49:50 1 plancher

        中间那个就用绝对定位,左右边宽度不一样的话会影响中间位置

        .search { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
        Comme+0
        Ajouter une réponse
          Sujets populaires
          Plus>
          Articles populaires
          Tutoriels populaires
          Plus>
          Tutoriels associés
          Recommandations populaires
          Derniers cours
          Derniers téléchargements
          Plus>
          effets Web
          Code source du site Web
          Matériel du site Web
          Modèle frontal
          À propos de nous Clause de non-responsabilité Sitemap
          Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！