Question

有人可以帮助我使用这个HTML来使import ApolloClient, { createNetworkInterface, addTypeName, } from 'apollo-client'; const isProduction = process.env.NODE_ENV !== 'development'; const testUrl = 'http://localhost:3000/api'; // const url = isProduction ? productionUrl : testUrl; const url = testUrl; const client = new ApolloClient({ networkInterface: createNetworkInterface({uri:testUrl}), dataIdFromObject:({id}) => id, reduxRootKey:state => state.apollo, initialState: (typeof window !=='undefined')? window.__STATE__:{} }); export default client;和import { createStore, compose, applyMiddleware } from 'redux'; import { syncHistoryWithStore } from 'react-router-redux'; import thunk from 'redux-thunk'; import {createLogger} from 'redux-logger'; import client from '../apolloClient'; import rootReducer from '../Reducers' //All Reducer import {initialState as allPosts} from '../Reducers/AllPosts_Reucer'; const isProduction = process.env.NODE_ENV !== 'development'; const isClient = typeof document !== 'undefined'; const initialState = { allPosts }; const middlewares = [thunk, client.middleware()]; const enhancers = []; if (!isProduction && isClient) { const loggerMiddleware = createLogger(); middlewares.push(loggerMiddleware); if (typeof devToolsExtension === 'function') { const devToolsExtension = window.devToolsExtension; enhancers.push(devToolsExtension()); } } const composedEnhancers = compose( applyMiddleware(...middlewares), ...enhancers ); const store = createStore( rootReducer, initialState, composedEnhancers, ); export default store;文本中心化，因为我已经失去了一点。

import React,{Component} from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { graphql } from 'react-apollo';

import gql from 'graphql-tag';

import * as postActions from '../../Redux/Actions/postActions';


class Home extends Component{
    componentWillMount(){
        // console.log('From Will Mount',this.props.posts)
    }
    renderAllPost(){
        const {loading,posts} = this.props;

        if(!loading){
            return posts.map(data => {
                return <li key={data.id}>{data.title}</li>
            })
        }else{
            return <div>loading</div>
        }
    }
    render(){
    console.log(this.props);
        return(
            <div>

                {this.renderAllPost()}

            </div>
        )
    }
}


//start from here
const GetallPosts = gql`
query getAllPosts{
  posts{
    id
    title
    body
  }
}
`;

// const mapStateToPros = (state) => ({
//     allPosts:state.allPosts
// });

const mapDispatchToProps = (dispatch) => ({
    actions:bindActionCreators(
        postActions,
        dispatch
    )
});


const ContainerWithData = graphql(GetallPosts,{
    props:({ data:{loading,posts} }) => ({
        posts,
        loading,
    })
})(Home)


export default connect(
    // mapStateToPros,
    // mapDispatchToProps
)(ContainerWithData)

Answer 1

这是你需要的吗？ https://jsfiddle.net/scorpio777/k99ywpng/6/

<强> CSS

h1 {
  font-size: 7vw;
  position: relative;
  top: 0.5vh
}

h2 {
  font-size: 2.3vw
}

.container-fluid {
  width: 100%;
  position: relative;
}

.pull-left {
  vertical-align: top;
  display: inline;
  position: absolute;
  left: 0;
}

.pull-right {
  height: 215px;
  vertical-align: top;
  display: inline;
  position: absolute;
  right: 0;
}

.center {
  display: inline;
  position: absolute;
  width:100%;
  text-align:center;
  z-index: 2;
}

<强> HTML

<div class="container-fluid">
    <a href="http://www.pagename.com" style="text-decoration: none; color: black">
    <div class="pull-left">
         <img src="pic1.gif" alt="Paradise" width="215px" height="215px"/>  
    </div>

    <div class="center">
          <h1>PAGENAME.COM</h1> 
          <h2>SLOGAN FOR THE WEBSITE</h2>
    </div>
    </a>        
  <div class="pull-right">
      <img src="pic2.gif" alt="Beach" width="215px" height="215px" />  
   </div>    
</div>

Answer 2

试试这个：

CSS

.your-element {
  display: flex !important;
  flex-flow: row wrap !important;
  justify-content: center !important;
}

无法将文本置于div中心

2 个答案: