Question

在此示例中，package org.jamesd.examples.security; import javafx.beans.binding.Bindings; import javafx.fxml.FXML; import javafx.scene.control.Label; public class SecurityController { private final UISecurityDelegate securityManager ; @FXML private Label securityStatus ; public SecurityController(UISecurityDelegate securityManager) { this.securityManager = securityManager ; } public void initialize() { securityStatus.textProperty().bind(Bindings .when(securityManager.authorizedProperty()) .then("Logged In") .otherwise("Logged Out") ); } @FXML private void login() { securityManager.login(); } @FXML private void logout() { securityManager.logout(); } }元素的尺寸可能已更改（现在由CSS定义为240x320）。我希望package org.jamesd.examples.security; import javafx.application.Application; import javafx.fxml.FXMLLoader; import javafx.scene.Scene; import javafx.stage.Stage; public class SecurityApp extends Application { @Override public void start(Stage primaryStage) throws Exception { // probably created by data or service layer, etc: SecurityManager securityManager = new SecurityManager(); UISecurityDelegate securityDelegate = new UISecurityDelegate(securityManager) ; FXMLLoader loader = new FXMLLoader(getClass().getResource("SecurityExample.fxml")); loader.getNamespace().put("securityManager", securityDelegate); loader.setController(new SecurityController(securityDelegate)); Scene scene = new Scene(loader.load()); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { Application.launch(args); } }元素始终与main的宽度匹配。有可能是CSS还是需要从javascript更改？

controls

main

输出：

Answer 1

添加一个额外的包装，这很容易

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}

body {
  background-color: #f5e0e0;
}

.video {
  position: relative;
  width: 240px;
  height: 320px;
  background-color: #000000;
  border: 1px solid red;
  display:block; /*added this to remove white space*/
}

.icon {
  display: flex;
  justify-content: space-evenly;
  background-color: white;
  border: 1px solid red;
}

.keys {
  height: 40px;
}

<div class="center-screen">
  <div>
    <video class="video" id="main" autoplay></video>
    <div id="controls" class="icon">
      <ion-icon class="keys" id="home" name="home"></ion-icon>
      <ion-icon class="keys" id="power" name="power"></ion-icon>
      <ion-icon class="keys" id="menu" name="menu"></ion-icon>
      <ion-icon class="keys" id="volumedown" name="volume-low"></ion-icon>
      <ion-icon class="keys" id="volumeup" name="volume-high"></ion-icon>
    </div>
  </div>
</div>
<script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script>

Answer 2

您可以这样做：将尺寸添加到.center屏幕，然后缩放视频和相对于它的控件。根据您实际内容的结构，这可能有所不同，但是只要您不向我们展示，我们就不能说：）

body {
  background-color: #f5e0e0;
}

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 240px;
  height: 320px;
  margin: auto;
}

.video {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #000000;
  border: 1px solid red;
}

.icon {
  justify-content: space-evenly;
  background-color: white;
  border: 1px solid red;
  width: 100%;
}

.keys {
  height: 40px;
}

<div class="center-screen">
  <video class="video" id="main" autoplay></video>
  <div id="controls" class="icon">
    <ion-icon class="keys" id="home" name="home"></ion-icon>
    <ion-icon class="keys" id="power" name="power"></ion-icon>
    <ion-icon class="keys" id="menu" name="menu"></ion-icon>
    <ion-icon class="keys" id="volumedown" name="volume-low"></ion-icon>
    <ion-icon class="keys" id="volumeup" name="volume-high"></ion-icon>
  </div>
</div>
<script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script>

Answer 3

我将视频和控件元素包装在div中，将新div的宽度设置为所需的任意像素值宽度，并使内部元素（video和controls）具有100％的宽度。

伪标记：

  <style> 
    .wrapper { width : 240px; }
     video, .controls { width: 100%; }
    </style>

    <div class="wrapper">
        <video>
        <div class="controls>
    <div>

Answer 4

CSS有很多方法可以做到这一点。一种方法是将中心屏幕容器设置为固定宽度，并添加margin: 0 auto以使其居中。删除视频元素的固定宽度。

然后删除align-items属性，因为stretch是默认设置，也是您想要的。

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  min-height: 100vh;
  max-width: 240px;
  margin: 0 auto;
}

body {
  background-color: #f5e0e0;
}

.video {
  position: relative;
  height: 320px;
  background-color: #000000;
  border: 1px solid red;
}

.icon {
  display: flex;
  justify-content: space-evenly;
  background-color: white;
  border: 1px solid red;
}

.keys {
  height: 40px;
}

Here's a fiddle

html-自动将宽度与上述元素匹配

4 个答案: