Question

我有一个表单，整个表单需要在页面中居中。出于设计原因，输入需要在字母周围留出一些空间。如果我给出填充，则输入不再完全居中。

我可以将输入居中，文本同时包含一些空格吗？

CSS：

PREFIX dc:     <http://purl.org/dc/terms/>
PREFIX mrss:   <http://search.yahoo.com/mrss/>
PREFIX search: <http://www.openrdf.org/contrib/lucenesail#>
PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
PREFIX ew: <http://ew.com/content/>
PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>

SELECT DISTINCT ?id
WHERE{
        ?sub dc:identifier ?id;
                dc:date ?date;
                search:matches ?match.

        ?match  dc:date ?dateSearch;                
                search:max "50";
                search:sort search:order.

        OPTIONAL {?sub news:section "agm"^^xsd:token;
                        dc:isPartOf <http://ew.go.com/agm/Wellness>.}       
        OPTIONAL {?sub $sectionClause.}         
}
ORDER BY DESC(?date)

HTML：

form {
    margin: 40px auto;
    width: 80%; max-width: 600px; min-width: 300px;
    background-color: aliceblue;
}

.title {
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size:40px; line-height:40px;
    letter-spacing: 1px;
    margin:10px 0; padding: 20px;
}

Answer 1

您需要添加：

* {  
  box-sizing: border-box;
}

form {
  margin: 40px auto;
  width: 80%;
  min-width: 300px;
  background-color: aliceblue;
}

.title {
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 40px;
  line-height: 40px;
  letter-spacing: 1px;
  margin: 10px 0;
  padding: 20px;
}

* {
  box-sizing: border-box;
}

<form action="update.php" method="post">
  <input type="text" name="titol" value="Title post" class="title">
  <input type="submit" name="actualitzar" value="Submit" class="submit">
</form>

box-sizing包括元素总宽度和高度中的填充和边框

Documentation

Answer 2

请将text-align: center添加到.title类属性中。

form {
  margin: 40px auto;
  width: 80%;
  min-width: 300px;
  background-color: aliceblue;
}

.title {
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 40px;
  line-height: 40px;
  letter-spacing: 1px;
  margin: 10px 0;
  padding: 20px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

<form action="update.php" method="post">
  <input type="text" name="titol" value="Title post" class="title">
  <input type="submit" name="actualitzar" value="Submit" class="submit">
</form>

使用填充为中心输入

2 个答案: