中心不是div中的所有内容[重复]

问题描述 投票：1回答：5

这个问题在这里已有答案：

这是我的HTML代码：

.kobel_perm {
  height: auto;
  border-radius: 5px;
  box-shadow: 1px 1px 5px #0d0d0d;
}

.kobel_input_cont {
	justify-content: center;
	align-items:center;
}

.kobelK {
	padding: 5px;
	background-image: linear-gradient(to right, #7ef6a9, #86a8e7);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

.kobel_perm input {
    width: 95%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
		background-color: #212121;
		color: #ffffff;
}

.kobel_perm input::placeholder {
	color: #ffffff;
}

.kobel_perm input[type=button] {
	cursor: pointer;
	border: 1px solid #7ef6a9;
}

.kobel_perm input[type=button]:hover, .kobel_in input[type=button]:focus {
	border: 1px solid #7ef6a9;
	animation: color_change 1s;
	background-color: #7ef6a9;
	color: #212121;
}

@-webkit-keyframes color_change {
	0% {
		background-color: #00251d1d;
		color: #ffffff;
	}
	100% {
		background-color: #7ef6a9;
		color: #212121;
	}
}
<div class='kobel_perm'>
    <p class="kobelK">Kobeltage</p>
    <div class="kobel_input_cont">
         <input type="text" id="kobel_weekday" name="kobel_weekday" placeholder="Wochentag">
         <input type="text" id="kobel_date" name="kobel_date" placeholder="Datum">
         <input type="text" id="kobel_topic" name="kobel_topic" placeholder="Thema">
         <input type="text" id="kobel_host" name="kobel_host" placeholder="Kobelwirte">
         <input type="button" value="Kobel hinzufügen" onclick="addKobel()">
         <input type="button" value="Kobel entfernen" onclick="removeKobel()">
      </div>
 </div>

这是我得到的结果：https://www.dropbox.com/s/37kor9k1lccctl3/look.PNG?dl=0 当您查看图像时，您会看到输入不是水平居中的。我找到了解决这个问题的方法，因为我只想把输入集中在一起，而不是上面的文字“Kobeltage”。 〜菲利普

javascript html css center
5个回答
1
投票

您正在寻找：text-align:center

只需将该属性添加到包含输入的div：

.kobel_input_cont {
    justify-content: center;
    align-items:center;
    text-align:center;

}
0
投票

您需要将占位符居中？用伪元素居中，如下：

.kobel_perm {
  height: auto;
  border-radius: 5px;
  box-shadow: 1px 1px 5px #0d0d0d;
}

.kobel_input_cont {
	justify-content: center;
	align-items:center;
}

.kobelK {
	padding: 5px;
	background-image: linear-gradient(to right, #7ef6a9, #86a8e7);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

.kobel_perm input {
    width: 95%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
		background-color: #212121;
		color: #ffffff;
}

.kobel_perm input::placeholder {
	color: #ffffff;
}

.kobel_perm input[type=button] {
	cursor: pointer;
	border: 1px solid #7ef6a9;
}

.kobel_perm input[type=button]:hover, .kobel_in input[type=button]:focus {
	border: 1px solid #7ef6a9;
	animation: color_change 1s;
	background-color: #7ef6a9;
	color: #212121;
}

@-webkit-keyframes color_change {
	0% {
		background-color: #00251d1d;
		color: #ffffff;
	}
	100% {
		background-color: #7ef6a9;
		color: #212121;
	}
}

::-webkit-input-placeholder {
   text-align: center;
}

:-moz-placeholder { /* Firefox 18- */
   text-align: center;  
}

::-moz-placeholder {  /* Firefox 19+ */
   text-align: center;  
}

:-ms-input-placeholder {  
   text-align: center; 
}
<div class='kobel_perm'>
                      <p class="kobelK">Kobeltage</p>
                      <div class="kobel_input_cont">
                        <input type="text" id="kobel_weekday" name="kobel_weekday" placeholder="Wochentag">
                        <input type="text" id="kobel_date" name="kobel_date" placeholder="Datum">
                        <input type="text" id="kobel_topic" name="kobel_topic" placeholder="Thema">
                        <input type="text" id="kobel_host" name="kobel_host" placeholder="Kobelwirte">
                        <input type="button" value="Kobel hinzufügen" onclick="addKobel()">
                        <input type="button" value="Kobel entfernen" onclick="removeKobel()">
                      </div>
                  </div>
0
投票

如果你想在中心设置占位符，那么你只需要写，

::-webkit-input-placeholder {
   text-align: center;
}

这将使您的占位符位于中心位置

.kobel_perm {
  height: auto;
  border-radius: 5px;
  box-shadow: 1px 1px 5px #0d0d0d;
}

.kobel_input_cont {
	justify-content: center;
	align-items:center;
}

.kobelK {
	padding: 5px;
	background-image: linear-gradient(to right, #7ef6a9, #86a8e7);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

.kobel_perm input {
    width: 95%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
		background-color: #212121;
		color: #ffffff;
}

.kobel_perm input::placeholder {
	color: #ffffff;
}

.kobel_perm input[type=button] {
	cursor: pointer;
	border: 1px solid #7ef6a9;
}

.kobel_perm input[type=button]:hover, .kobel_in input[type=button]:focus {
	border: 1px solid #7ef6a9;
	animation: color_change 1s;
	background-color: #7ef6a9;
	color: #212121;
}
::-webkit-input-placeholder {
   text-align: center;
}

@-webkit-keyframes color_change {
	0% {
		background-color: #00251d1d;
		color: #ffffff;
	}
	100% {
		background-color: #7ef6a9;
		color: #212121;
	}
}
<div class='kobel_perm'>
                      <p class="kobelK">Kobeltage</p>
                      <div class="kobel_input_cont">
                        <input type="text" id="kobel_weekday" name="kobel_weekday" placeholder="Wochentag">
                        <input type="text" id="kobel_date" name="kobel_date" placeholder="Datum">
                        <input type="text" id="kobel_topic" name="kobel_topic" placeholder="Thema">
                        <input type="text" id="kobel_host" name="kobel_host" placeholder="Kobelwirte">
                        <input type="button" value="Kobel hinzufügen" onclick="addKobel()">
                        <input type="button" value="Kobel entfernen" onclick="removeKobel()">
                      </div>
                  </div>
0
投票

在你的CSS中添加以下代码

::-webkit-input-placeholder {
   text-align: center;
}
0
投票

只需添加text-align:center

Here is the working code.

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.