Question

我有一个图像和一些文本，它们都可以用作复选框。但是，当我尝试将它们水平对齐时，对我来说不起作用。

我尝试使用分隔线，但是当我这样做时，无法将文本部分包含在按钮中。

CSS文件夹：

.hidden {
  display: none;
}

.registerCheckbox {
    padding: 10px;
    display: block;
    position: relative;
    margin: 10px;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    border-width: 1px;
    border-color: #ddd;
    border: 1px solid rgb(212, 212, 212);
    box-shadow: 7px 7px 2px -3px rgb(212, 212, 212);
    border-radius: 25px;
    transition: 0.2s;
  }

  .registerCheckbox::before {
    background-color: white;
    color: white;
    content: " ";
    display: block;
    border-radius: 50%;
    border: 1px solid grey;
    position: absolute;
    top: -5px;
    left: -5px;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 28px;
    transition-duration: 0.4s;
    transform: scale(0);
  }

  .registerCheckbox img {
    height: 100px;
    width: 100px;
    transition-duration: 0.2s;
    transform-origin: 50% 50%;
  }

  :checked+.registerCheckbox {
    border-radius: 25px;
    border: 5px solid #5BDEBE;
    transition: 0.2s;
  }

  :checked+.registerCheckbox::before {

    border-color: #ddd;
    border: 1px solid grey;

  }

JS文件夹：


       <link rel="stylesheet" type="text/css" href={require('../static/css/planCheckbox.css')} />

           <input type="checkbox" id="google" value={this.state.google} checked={this.state.google} onChange={() => { this.setState({ google: !this.state.google }) }} />
         <label class="registerCheckbox" htmlFor="google-ads"><img alt="Google ads" src={require('../static/img/register/google.png')} /> <br></br>
           <b>{this.props.t('TEST')}</b>:<br />{this.props.t('This doesnt work!')}.</label>

我得到的（顶部）和我想要的（底部）

我们非常感谢您的帮助！

Answer 1

您可以使用以下代码：

Display: flex;

父div上的

。这应该使所有内容彼此相邻。

Answer 2

我遗漏了一些HTML属性，这些属性实际上并不能很容易地理解此演示代码中发生的事情。我还需要围绕您的文本元素创建一个新容器。

希望本演示为您提供了一个起点，以弄清如何构建它。

我试图保留您原来的样式。为了更好地理解这些更改，我将它们放置在称为“ flex”的附加类中。

.hidden {
  display: none;
}

.registerCheckbox {
    padding: 10px;
    display: block;
    position: relative;
    margin: 10px;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    border-width: 1px;
    border-color: #ddd;
    border: 1px solid rgb(212, 212, 212);
    box-shadow: 7px 7px 2px -3px rgb(212, 212, 212);
    border-radius: 25px;
    transition: 0.2s;
  }
  
  /* Flexbox solution */
  .flex.registerCheckbox  {
    display: flex;
  }
    
  .flex.registerCheckbox .text-container {
    display: flex;
    flex-direction: column;
    padding: 0 10px 10px;
  }
  
  .registerCheckbox::before {
    background-color: white;
    color: white;
    content: " ";
    display: block;
    border-radius: 50%;
    border: 1px solid grey;
    position: absolute;
    top: -5px;
    left: -5px;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 28px;
    transition-duration: 0.4s;
    transform: scale(0);
  }

  .registerCheckbox img {
    height: 100px;
    width: 100px;
    transition-duration: 0.2s;
    transform-origin: 50% 50%;
  }

  input:checked + .registerCheckbox {
    border-radius: 25px;
    border: 5px solid #5BDEBE;
    transition: 0.2s;
  }

  input:checked + .registerCheckbox::before {
    content: "";
    border-color: #ddd;
    border: 1px solid grey;

  }

<input type="checkbox" id="google-1" class="hidden" />
 <label for="google-1" class="flex registerCheckbox">
 <img alt="Google ads" src="https://placehold.it/400x400" />
  <div class="text-container">
    <strong>Test</strong>
    <span>This doesn't work.</span>
  </div>
 </label>
 
 <input type="checkbox" id="google-2" class="hidden" />
 <label for="google-2" class="flex registerCheckbox">
 <img alt="Google ads" src="https://placehold.it/400x400" />
  <div class="text-container">
    <strong>Test</strong>
    <span>This doesn't work.</span>
  </div>
 </label>

Answer 3

将父div添加到您的复选框并标记，并将display:flex;设置为该父类。

这是更新的代码：

.checkboxdiv {
  display: flex;
}

<div class="checkboxdiv">
  <input type="checkbox" id="google" value={this.state.google} checked={this.state.google} onChange={()=> { this.setState({ google: !this.state.google }) }} />
  <label class="registerCheckbox" htmlFor="google-ads"><img alt="Google ads" src={require('../static/img/register/google.png')} /> <br></br>
           <b>{this.props.t('TEST')}</b>:<br />{this.props.t('This doesnt work!')}.</label>
</div>

如何在复选框元素内水平对齐图像和文本？

3 个答案: