如何在Grid布局的Toolbar中实现左Logo、中内容、右按钮的垂直居中定位？

Hey there! Let's get that toolbar sorted for your Google Sheets-style editor. Your existing grid layout for the overall app is solid—we just need to tweak the toolbar's internal layout to get the left-aligned logo, centered middle content, and right-aligned button group (with Button B closest to the edge) all vertically centered.

Step 1: Update the Toolbar CSS #

Replace your current .toolbar CSS with this flexbox-based setup. Flexbox is perfect for this kind of horizontal distribution + vertical centering task:

.layout {
  height: 100vh;
  display: grid;
  grid-template-columns: 34% 33% auto;
  grid-template-rows: 50px auto;
  grid-template-areas: 
    "toolbar toolbar toolbar" 
    "searchbox resultbox editorbox";
}

.toolbar {
  grid-area: toolbar;
  display: flex;
  align-items: center; /* Vertically centers ALL elements in the toolbar */
  justify-content: space-between; /* Pushes logo left, button group right, leaves space for middle content */
  padding: 0 16px; /* Prevents elements from touching screen edges */
  gap: 16px; /* Adds consistent spacing between toolbar sections */
  background: #fff; /* Optional: Match your app's theme */
  border-bottom: 1px solid #e0e0e0; /* Optional: Add a divider between toolbar and content */
}

/* Optional: Style for logo to avoid overflow */
.toolbar-logo img {
  height: 32px; /* Match your toolbar height (50px) minus padding */
  width: auto;
}

/* Middle content container: Takes up all available space between left/right sections */
.toolbar-center-content {
  flex: 1;
  display: flex;
  justify-content: center; /* Centers the middle content horizontally within its space */
}

/* Right button group: Keeps buttons aligned and spaced */
.toolbar-right-actions {
  display: flex;
  gap: 8px; /* Space between Button A and Button B */
}

/* Optional: Style your toolbar buttons */
.toolbar-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  background: #f1f3f4;
  cursor: pointer;
}

.toolbar-btn:hover {
  background: #e8eaed;
}

Step 2: Update Your Toolbar JSX in App.js #

Modify your toolbar rendering code to split the content into the three required sections. This structure maps directly to the CSS we just added:

<div className={userSession.layout.name}>
  {userSession.layout.toolbar.active && (
    <div className="toolbar">
      {/* Left: Logo */}
      <div className="toolbar-logo">
        {/* Replace with your actual logo component/image */}
        <img src={`${process.env.PUBLIC_URL}/logo.png`} alt="Editor Logo" />
      </div>

      {/* Middle: Centered Content */}
      <div className="toolbar-center-content">
        {/* Add your middle content here (e.g., document title, status indicator) */}
        <span>Untitled Document</span>
      </div>

      {/* Right: Button Group (Button A first, Button B second = B closer to edge) */}
      <div className="toolbar-right-actions">
        <button className="toolbar-btn">Button A</button>
        <button className="toolbar-btn">Button B</button>
      </div>
    </div>
  )}

  {/* Your existing content sections remain the same */}
  {userSession.layout.search.active && <div className="searchbox"> search </div>}
  {userSession.layout.results.active && <div className="resultbox"> result </div>}
  {userSession.layout.editor.active && <div className="editor"> editor </div>}
</div>

Why This Works #

• Flexbox for Toolbar: We use display: flex on the toolbar to easily handle horizontal alignment and vertical centering with align-items: center.
• Space Between: justify-content: space-between automatically pushes the logo to the left and button group to the right, while the middle section uses flex: 1 to fill the remaining space.
• Button Order: Placing Button A before Button B in the right action group ensures Button B is closest to the screen's right edge (since flexbox defaults to left-to-right flow).

Quick Notes #

• Adjust the padding, gap, and button styles to match your app's design system.
• If you need the middle content to be left-aligned instead of centered, just remove justify-content: center from .toolbar-center-content.
• For responsive behavior (e.g., hiding buttons on mobile), add media queries to adjust the toolbar layout at smaller screen sizes.

内容的提问来源于stack exchange，提问作者inspiral