Question

我正在尝试在“联系人”和“段落”文本下方的交互式元素居中显示我的电子邮件“ container1”。

现在，它似乎只是向左偏移，我希望它在保持页面响应能力的同时居中。

我可以将元素居中，但是页面将不再对移动平台做出响应，因为它仍然会偏离中心。我的主要目标是使页面保持响应状态。

.container1 {
  width: 900px;
  margin: 250px auto 0;
  display: flex;
}

.container1 .box {
  position: relative;
  width: 300px;
  height: 100px;
  box-sizing: border-box;
  text-align: center;
  margin: 0 10px;
  background: linear-gradient(to right, #4458dc 0%, #854fee 100%), radial-gradient(circle at top left, #4458dc, #854fee);
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(118, 85, 225, 1);
}

.container1 .box .icon {
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #4458dc 0%, #854fee 100%), radial-gradient(circle at top left, #4458dc, #854fee);
  transition: 0.5s;
}

.container1 .box .icon .fa {
  font-size: 4em;
  line-height: 100px;
  color: #ffffff;
}

.container1 .box:hover .icon {
  transform: scale(0);
}

.container1 .box .details {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  transition: 0.5s;
  transform: scale(2);
  opacity: 0;
}

.container1 .box:hover .details {
  transform: scale(1);
  opacity: 1;
}

.container1 .box .details h3 {
  margin: 0;
  padding: 0;
  line-height: 100px;
  font-size: 24px;
  color: #000000;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<a name="Contact"></a>
<section class="contact_area section_gap">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8 text-center">
        <div class="main_title">
          <h2>Contact</h2>
          <p>Please contact me with any questions, comments, or conerns</p>
        </div>
      </div>
    </div>
  </div>
  <div class="container1" style="margin: auto; justify-content: center">
    <div class="col-lg-8" style="display: inline-block">
      <div class="box" style="">
        <div class="icon"><i class="fa fa-envelope" aria-hidden="true"></i></div>
        <div class='details' style="">
          <h3>myemail@gmail.com</h3>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 1

ChromeDriver driver = new ChromeDriver();
HttpCommandExecutor executor = (HttpCommandExecutor) 
driver.getCommandExecutor();
URL url = executor.getAddressOfRemoteServer();
SessionId session_id = driver.getSessionId();    
RemoteWebDriver driver2 = createDriverFromSession(session_id, url);
driver2.get("**<MY URL>**");
webElement = driver2.findElement(By.className((DashboardPage.searchDropDown)));                  
webElement.click();

public static RemoteWebDriver createDriverFromSession(final SessionId sessionId, URL command_executor){
CommandExecutor executor = new HttpCommandExecutor(command_executor) {

@Override
public Response execute(Command command) throws IOException {
   Response response = null;
   if (command.getName() == "newSession") {
       response = new Response();
       response.setSessionId(sessionId.toString());
       response.setStatus(0);
       response.setValue(Collections.<String, String>emptyMap());
   } else {
      response = super.execute(command);
   }
   return response;
 }
};

return new RemoteWebDriver(executor, new DesiredCapabilities());
}

.container1 .box {
  position: relative;
  width: 300px;
  height: 100px;
  box-sizing: border-box;
  text-align: center;
  margin: auto;
  background: linear-gradient(to right, #4458dc 0%, #854fee 100%), radial-gradient(circle at top left, #4458dc, #854fee);
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(118, 85, 225, 1);
}

.container1 .box .icon {
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #4458dc 0%, #854fee 100%), radial-gradient(circle at top left, #4458dc, #854fee);
  transition: 0.5s;
}

.container1 .box .icon .fa {
  font-size: 4em;
  line-height: 100px;
  color: #ffffff;
}

.container1 .box:hover .icon {
  transform: scale(0);
}

.container1 .box .details {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  transition: 0.5s;
  transform: scale(2);
  opacity: 0;
}

.container1 .box:hover .details {
  transform: scale(1);
  opacity: 1;
}

.container1 .box .details h3 {
  margin: 0;
  padding: 0;
  line-height: 100px;
  font-size: 24px;
  color: #000000;
}

Answer 2

您可以使用以下示例：

.container1 { display:flex; justify-content:center;  }

Answer 3

很好奇，为什么要链接课程？您可以只调用类并设置样式。任何内联CSS将覆盖样式标签和CSS文件。通常，如果某些事情没有按照您的期望排列，那么它就会在其他地方被覆盖。除了使用@media考虑移动设备中元素的位置外，我还经常通过使用50％的left和margin-left等于宽度的一半的负值来使元素居中。因此，对于您来说，我可以将CSS设置为：

.detail {
position: absolute;
top: 0px;
width: 300px;  
/*(or you could have it as a percentage like 80%)*/
left: 50%;
margin-left: -150px;
/*(or in percent example -40%)*/
text-align: center;
}

元素在元素中心从其左侧开始的位置偏移了元素的宽度将元素推向上方的量。

如何在容器中将div元素居中

3 个答案: