使用CSS在同一行上使用CSS居中輸入元素和圖像

我想在div內的同一行上垂直居中輸入元素和小png文件。通過居中我的意思是一條水平線可以穿過div的垂直中心，輸入元素和png文件。輸入元素寬度爲400px，高度爲26px，png文件寬度爲24px，高度爲30px。容器div寬445px，高36px。下面是HTML和CSS。到目前爲止，我發現的唯一方法是使input元素和png文件的位置：relative，然後使用top :, bottom :, left :,或right：offset來精確定位我想要的位置。我對HTML/CSS相當陌生，並且使用位置：具有特定偏移量的相對似乎是一種蠻力方法。有沒有更簡單，更優雅或更喜歡的方式來做到這一點？使用CSS在同一行上使用CSS居中輸入元素和圖像

HTML是：

<div class="inner"> 
    <input type="text"> 
    <img class="mic" src="mic.png"> 
</div>

CSS是：

.inner { 
 
     margin-left: auto; 
 
     margin-right: auto; 
 
     height: 36px; 
 
     width:445px; 
 
     border: 1px solid grey; 
 
     } 
 

 
input { 
 
     margin-left: auto; 
 
     margin-right: auto; 
 
     height: 26px; 
 
     width: 400px; 
 
     border: none; 
 
     text-align: left 
 
     } 
 
.mic { 
 
     height: 30px; 
 
     width: 24px; 
 
     }

來源

2017-02-22 T. Briley

您可以使用下面的代碼示例。我使用verticle-align：圖像的中間，然後使用內部包裝的線高。

.inner { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    height: 50px; 
 
    width: 445px; 
 
    border: 1px solid grey; 
 
    display: inline-block; 
 
    line-height: 3em; 
 
     } 
 

 
input { 
 
     margin-left: auto; 
 
    margin-right: auto; 
 
    height: 28px; 
 
    width: 400px; 
 
    text-align: left; 
 
    border:solid 1px #000;  
 
     } 
 
.mic { 
 
     height: 30px; 
 
     width: 24px; 
 
     vertical-align: middle; 
 
     }

<div class="inner"> 
 
    <input type="text"> 
 
    <img class="mic" src="mic.png"> 
 
</div>

來源

2017-02-22 04:34:26

你應該用 '柔性' 的CSS屬性可以很容易地使用。

.inner { 
 
    height: 50px; 
 
    width: 445px; 
 
    border: 1px solid grey; 
 
    padding:0 16px; 
 
\t 
 
\t display: -webkit-box; 
 
\t display: -ms-flexbox; 
 
\t display: -webkit-flex; 
 
\t display: flex; 
 
\t 
 
\t -webkit-box-align: center; 
 
\t -webkit-align-items: center; 
 
\t -ms-flex-align: center; 
 
\t align-items: center; 
 
\t 
 
\t margin:auto; 
 
} 
 
input { 
 
\t -webkit-box-flex: 2; 
 
    -webkit-flex: 2; 
 
    -ms-flex: 2; 
 
    flex: 2; 
 
\t 
 
\t padding:5px; 
 
    border:solid 1px #000; 
 
\t margin-right:8px; 
 
} 
 
.mic { 
 
\t height: 30px; 
 
\t width: 24px; 
 
}

<div class="inner"> 
 
    <input type="text"> 
 
    <img class="mic" src="mic.png"> 
 
</div>

來源

2017-02-22 05:27:23

你可以試試這個：

.inner { 
 
     height: 36px; 
 
     width: 445px; 
 
     border: 1px solid grey; 
 
    } 
 

 
    input { 
 
     margin-left: auto; 
 
     margin-right: auto; 
 
     height: 26px; 
 
     width: 400px; 
 
     border: none; 
 
     text-align: left; 
 
    } 
 

 
    .mic { 
 
     height: 30px; 
 
     width: 24px; 
 
    } 
 
    .container{ 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    height:700px; 
 
    
 
    }

<body class="container"> 
 
    <div class="inner"> 
 
     <input type="text"> 
 
     <img class="mic" src="http://placehold.it/24x30.png"> 
 
    </div> 
 
</body>

來源

2017-02-22 05:40:00 Karthik

使用CSS在同一行上使用CSS居中輸入元素和圖像

回答

相關問題