Question

如何在框的中间垂直对齐文本？这不会使文本在垂直中间居中。参见下面的红色箭头。

05-07-2019 - Service.log
05-07-2019 - Service.log05-07-2019 - Service.log
05-07-2019 - Service.log05-07-2019 - Service.log05-07-2019 - Service.log

<log4net>
    <appender name="RollingFileAppender" type="log4net.Appender.RollingFileAppender">
      <file value="LogFiles/" />
      <datePattern value="dd-MM-yyyy' -  Service.log'" />
      <appendToFile value="true" />
      <rollingStyle value="Date" />
      <maxSizeRollBackups value="10" />
      <maximumFileSize value="10000KB" />
      <staticLogFileName value="false" />
      <layout type="log4net.Layout.PatternLayout">
        <conversionPattern value="[%date]-[%-5level]-[%logger]-%message%newline" />
      </layout>
    </appender>
    <appender name="UdpAppender" type="log4net.Appender.UdpAppender">
      <localPort value="64667" />
      <remoteAddress value="127.0.0.2" />
      <remotePort value="64666" />
      <layout type="log4net.Layout.PatternLayout, log4net">
        <conversionPattern value="[%-5level]-[%logger]-%message%newline" />
      </layout>
    </appender>
    <appender name="ColoredConsoleAppender" type="log4net.Appender.ColoredConsoleAppender">
      <mapping>
        <level value="INFO" />
        <foreColor value="White, HighIntensity" />
        <backColor value="Green" />
      </mapping>
      <mapping>
        <level value="DEBUG" />
        <foreColor value="White, HighIntensity" />
        <backColor value="Blue" />
      </mapping>
      <mapping>
        <level value="WARN" />
        <foreColor value="Yellow, HighIntensity" />
        <backColor value="Purple" />
      </mapping>
      <mapping>
        <level value="ERROR" />
        <foreColor value="Yellow, HighIntensity" />
        <backColor value="Red" />
      </mapping>
      <layout type="log4net.Layout.PatternLayout">
        <conversionPattern value="%date [%thread] %-5level %logger [%property{NDC}] - %message%newline" />
      </layout>
    </appender>
    <root>
      <level value="DEBUG" />
      <appender-ref ref="ColoredConsoleAppender" />
      <appender-ref ref="RollingFileAppender" />
      <appender-ref ref="UdpAppender" />
    </root>
  </log4net>

测试

Answer 1

align-self: center;对孩子有何影响？（另请参见on MDN）

也就是说：

.test {
  align-self: center;
}

这是您的示例，但具有以下额外属性：

.grid-container {
  display: grid;
  grid-template-columns: 140px 140px;
  grid-template-rows: 140px;
  align-items: stretch;
}

img {
  width: 100%;
  height: auto;
}

.test {
  text-align: center;
  align-self: center;
}

<div class="grid-container" id="gridid42f08d611e2346748fbe47264fd732e0">
    <img class="imgcard mCS_img_loaded" id="imgid42f08d611e2346748fbe47264fd732e00" src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&amp;preset=gallery-tab-main-image">
    <div class="test"> test </div>
</div>

作为旁注，您的问题中有vertical-align: center，这是不正确的； vertical-align属性改为使用middle（出于任何奇怪的原因）

在网格中间对齐文本框

1 个答案: