CODEWITHSUNDEEP
javascriptcssreactjs
solarflare
solarflare

Reputation: 1092

Style React component to appear in the middle of semantic-ui grid column

I'm using semantic-ui and am trying to centre my Animation component in the middle of my div, so it should say 'protect your data' in the middle of the right-hand grid column, though I'm very new to React/Javascript/Front-end world so can't figure out how to best do this!

I'm using grid to ensure the App is mobile friendly, so using simple css like left: "70%"; top: "50%" isn't quite what I'm looking for. Anyone have any ideas?

enter image description here

Deal.js

import React from "react";
import Timer from "./Timer";
import Animation from "./Animation";
import deal from "./Deal.css";

class Deal extends React.Component {
    render() {
        return (
            <div className="ui vertically divided grid">
                <div className="two column row">
                    <div className="column">
                        <h3>DEAL ENDS IN:</h3>
                        <Timer endTime="april 18, 2020 12:00:00" />
                    </div>
                    <div>
                        <Animation />
                    </div>
                </div>
            </div>
        );
    }
}

export default Deal;

Upvotes: 0

Views: 112

Answers (1)

Dushan Ranasinghage
Dushan Ranasinghage

Reputation: 576

This might be help. 

class App extends React.Component {
 render() {
  return (
  <div class="ui four column grid">
    <div
      class="row"
      style={{
        height: "150px",
        backgroundColor: "bisque"
      }}
    >
      <div
        class="eight wide column"
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center"
        }}
      >
        <div style={{ margin: "0px" }}>
          <h3>DEAL ENDS IN:</h3>
          <div
            style={{
              height: "50px",
              width: "200px",
              backgroundColor: "red"
            }}
          >
            Timer Component
          </div>
        </div>
      </div>
      <div
        class="eight wide column"
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center"
        }}
      >
        <div style={{ margin: "0px" }}>
          <h1>protect your data</h1>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="wide centered column">Animation Component</div>
    </div>
  </div>
  );
 }
}

export default App;

You just have to replace my contents here. It is all about designing the grid. There is no need to have a react experience for that. If something need to be corrected, put a comment.

Upvotes: 1

Related Questions